안드로이드 팀 - 터닝 UI 모음집

안녕하세요. 터닝 안드로이드 팀입니다. 

 

터닝(terning)의 안드로이드 파트에서 직접 구현한 화면들을 모아봤습니다!

이번 글에서는 앱 개발 과정에서 만들었던 UI를 한 자리에 모아,  
화면별 기능과 구현 포인트를 간단히 소개하려고 합니다:)

---

온보딩

• 앱을 처음 진입하면 스플래쉬 화면에 이어 로그인 화면이 나옵니다.
• Kakao SDK를 활용하여 소셜 로그인을 진행하였습니다.
• 이후 Shared Preference를 활용하여 토큰을 관리하였습니다.

• 프로필 및 닉네임을 통해 회원가입을 진행합니다.
• 닉네임의 경우, 12자리 이내여야 하고 특수문자나 기호는 입력이 불가한 조건이 있습니다.
• 조건에 맞지 않을 경우, 텍스트 필드의 색상이 빨간색으로 바뀌며 경고를 줍니다.

• "계획 나중에 입력하기"를 통해 온보딩 절차를 건너뛸 수 있습니다.
• "시작하기"를 누를 경우, 총 3가지의 필터링 정보를 입력하여 온보딩 절차를 마칩니다.
• 데이트피커의 경우 커스텀 FilteringYearMonthPicker 컴포저블 함수를 만들어 구현하였습니다.

---

홈

• 내가 선택한 필터링 정보에 맞는 인턴 공고들을 확인할 수 있는 홈 화면입니다
  • Paging3를 사용해 10개씩 공고를 로딩하여 1700개 이상의 공고를 끊김 없이 제공합니다.
• 관심있는 공고들을 스크랩할 수 있습니다
  • 스크랩 버튼 클릭 시 공고를 한 번 더 간략하게 확인할 수 있습니다
  • 공고 스크랩 색상을 지정할 수 있습니다
  • 스크랩 시 캘린더에 바로 저장됩니다
• 스크랩한 공고 중 일주일 이내에 마감되는 공고는 홈 상단에서 한 번에 확인할 수 있습니다

 

 

• 공고들을 원하는 기준에 맞게 정렬할 수 있도록 5개의 정렬 순서를 제공합니다
  • 채용 마감 이른 순 
  • 근무 기간 짧은 순
  • 근무 기간 긴 순
  • 스크랩 많은 순
  • 조회수 많은 순
• 직무 필터링과 계획 필터링을 통해 나에게 딱 맞는 공고를 확인할 수 있습니다
  • 직무 필터링 : 기획/전략, 디자인/예술, 개발/IT 등 9개의 직무 필터 제공
  • 계획 필터링 : 재학상태, 희망 근무 기간, 근무 시작 시기 필터 제공

---

캘린더

• 캘린더탭의 메인 화면이자 한 달 단위의 일정을 한눈에 보는 월간 달력 화면입니다.
• 화면을 좌우로 스크롤하거나 화면 상단의 화살표 아이콘을 클릭하여 다른 월의 일정을 볼 수 있습니다. 
• Jetpack Pager API를 활용해 스크롤 가능한 화면을 구현했습니다. 

• 월 달력에서 날짜를 선택하면 주간 달력 화면으로 이동합니다. 이곳에선 한 주 단위로 세부 일정을 확인할 수 있습니다.
• 공고 스크랩 색상을 변경하거나 공고 상세 페이지로 이동할 수 있습니다. 
• 북마크 아이콘을 눌러 스크랩을 해제할 수 있습니다.
• 월 달력으로 돌아가기 위해 3가지 메커니즘을 제공합니다.
  • 선택한 날짜를 다시 터치합니다.
  • 디바이스 네비게이션 바의 뒤로가기 버튼을 클릭합니다.
  • 화면을 위에서 밑으로 스와이프합니다.

• 화면 우측 상단에 위치한 메뉴 버튼을 클릭하면 관심 있는 공고를 월별로 모아보는 스크랩 공고 목록 화면으로 이동합니다.
• 공고 스크랩 색상 변경, 스크랩 취소, 그리고 공고 상세페이지 이동이 가능합니다.
• 좌우 스와이프 및 화면 상단 화살표 아이콘 클릭을 통해 다른 월의 공고를 확인할 수 있습니다.

---

탐색

• 배너를 통해 터닝 소식을 한 눈에 접할 수 있고, 관련 링크로 이동합니다.
  • 배너는 3초가 지나면 자동으로 다음 화면으로 이동합니다.
• 인기 조회 목록: 주간 최다 조회수를 기록한 공고들을 순서대로 5개까지 가로 스크롤 형태로 제공합니다.
• 인기 스크랩 목록: 주간 최다 스크랩수를 기록한 공고들을 순서대로 5개까지 가로 스크롤 형태로 제공합니다.

• 키워드로 공고를 검색할 수 있으며, 전체 목록을 한 번에 불러오지 않고 10개씩 페이징하여 불러옵니다.
  • 검색 내역이 없을 경우 "검색 결과가 없어요" 페이지가 나타납니다.
• 화면 진입 시 키보드가 바로 활성화되어 사용자가 즉시 타이핑을 시작할 수 있으며, 영역 밖을 터치하면 키보드가 내려갑니다.
• 목록에서 보여지는 스크랩 버튼을 통해 캘린더에 스크랩 할 수 있으며, 스크랩 시 화면이 다시 조회됩니다.
• 나에게 딱 맞는 공고 검색을 위해 정렬 순서를 변경하면, 정렬에 따라 목록을 다시 재조회합니다.
  • 채용 마감 이른 순
  • 근무 기간 짧은 순
  • 근무 기간 긴 순
  • 스크랩 많은 순
  • 조회수 많은 순

 

• 회사 정보: 기업 로고, 회사명, 기업 형태, 공고 제목, D-DAY, 조회수를 표시합니다.
• 상세 정보:
  • 공고 요약: 서류 마감일, 근무 기간, 근무 시작일 등 핵심 일정을 요약합니다.
  • 자격 요건: 모집 대상(학년무관), 모집 직무(마케팅) 등 지원에 필요한 자격을 명시합니다.
  • 상세 정보: 담당 업무 등 구체적인 직무 내용을 기술합니다.
• 스크랩 아이콘을 통해 스크랩이 가능하며 스크랩 횟수를 함께 표시합니다.
• 화면 하단에 지원 버튼을 통해 사용자가 즉시 지원 사이트로 이동할 수 있습니다.
• 공고의 특정 부분을 선택하여 복사할 수 있습니다.
• 화면 상단의 공유하기 버튼을 통해 카카오 공유하기가 가능합니다.

---

마이페이지

• 회원 정보를 볼 수 있는 마이페이지 화면입니다.
• 푸쉬알림의 수신 여부를 결정할 수 있는 토글 버튼이 있습니다.
• Optimistic UI를 활용하여 무분별한 서버통신을 막았습니다. 

• 회원 정보를 수정할 수 있는 화면입니다.
• 회원가입 화면과 동일한 컴포넌트는 재사용하였습니다.
• 프로필과 닉네임 중 한 번이라도 수정할 경우 "저장하기" 버튼이 활성화 됩니다.

• 로그아웃 및 회원탈퇴 버튼을 누르게 되면, 로컬에 저장되어 있는 모든 토큰을 삭제하고 로그인 화면으로 돌아갑니다.

---

알림

• FCM을 활용하여 푸쉬알림을 구현하였습니다.
• 페이로드로 title, body, image, type을 받습니다. title은 제목, body는 알림 내용, image는 오른쪽의 이미지, type은 알림 클릭 시 이동할 화면을 나타냅니다.
• type의 종류로는 home(홈), calendar(캘린더), search(탐색)이 있으며 딥링크를 서비스 단에서 생성하여 화면을 이동하였습니다.