brunch

You can make anything
by writing

- C.S.Lewis -

by 김효진 May 15. 2021

신규 서비스 출시(#4)_모바일 앱 디자인

스타트업 앱 출시 과정을 기록하다.


기업 내 디자이너가 혼자라는 것은 문제 해결도 혼자 해야 하며 최종 결정에 대한 책임도 전적으로 짊어져야 한단 것이기에, 참고할 만한 서비스는 직접 다운로드하여보고, 회원가입부터 로그아웃까지 전체 흐름을 직접 경험해보면서 기록하였다. 최대한 많은 서비스를 사용해보려고 하였고, 사용자에게 익숙한 디자인은 무엇일지 고민하였다.

초기 스타트업에서 서비스 출시를 할 때는, 인터렉션적인 부분에 치중되기보단 필수 기능을 최대한 심플하게 작업하여 1차로 출시하고, 사용자가 증가함에 따라 사용자 응대를 통해 얻은 피드백을 다음 업데이트까지 잘 녹여내도록 해야 한다.


현재 눈치는 1차 출시를 완료하였으며, 사용자 유입을 위한 마케팅 기획단계에 있다.


이 글을 통해 스타트업에서 근무하고 있는 디자이너가, 모바일 UI·UX 디자인을 하면서 고민하였던 문제와 문제를 해결해 나가는 과정 그리고 도움받은 자료들을 공유해보고자 한다. 더불어 스케줄, 채팅 디자인을 위해 정리해두었던 분석은 따로 정리하여 추후 업로드할 예정이다.


+ 추가적으로 이 디자인이 정답이다 라고 말하려는 것은 아니다. 이런 생각을 가지고 디자인을 풀어보았으니 한 번 참고해보고 이를 바탕으로 더욱 발전할 수 있기를 바라는 마음에서 정리하게 되었다.




 신규 서비스 출시(#4)_모바일 앱 디자인 목차


01. 문서화 작업

02. 모바일 UI·UX 디자인

02-1. 로그인

02-2. 메인 페이지

02-3. 캘린더

02-4. 식사 등록

02-5. 눈치 톡

02-6. 마이페이지

02-7. 기타





 눈치(Noonch)

주입식, 형식적인 정보공유가 불편하였다면 맛있는 점심과 함께 자유롭게 이야기 나눠 볼 수 있는 "스타트업 대표와의 1:1 식사 매칭 서비스"이다.

나의 새로운 아이디어와 열정을 공유하고, 내가 진짜 원하는 지식과 노하우를 접해볼 수 있으며, 더 나아가 서로에게 인생 멘토, 식사 메이크, 고민 상담사, 아이디어 뱅크, 활력소가 될 수 있기를 기대하고 있다.


 호스트 : 스타트업 종사자, 식사를 개설하는 사람.

 게스트 : 창업 관심자, 예비창업자, 호스트가 개설한 식사를 신청하는 사람.


신규 서비스 출시(#2)_브랜딩








01. 문서화 작업

기업 내에서 협업 시 제일 중요한 점은 소통과 공유 그리고 문서화 작업이다.

만약 개발팀 안에서 서로 소통하여 로직 변경 후 문서화 작업을 제대로 해놓지 않는다면, 디자이너는 변경사항에 대한 대처(디자인 수정, 추가 사항 반영)가 늦어지거나 놓칠 수밖에 없다. 마찬가지로, 디자인팀 안에서만 소통 후 디자인을 임의대로 변경해놓는다면 개발자는 변경사항에 대한 대처(기능이 추가됨에 따라 전체 로직이 변경될 수도 있기 때문에 자칫 많은 시간이 필요할 수 있다.)가 늦어질 수밖에 없다.

그렇기에 변경사항은 소통 후 문서화하여 주기적으로 체크해 주는 것이 좋다.

문서화 작업은 비즈니스 커뮤니케이션 플랫폼 지라, 팀즈, 슬랙, 노션 등 기업에서 추구하는 프로그램으로 작업하는 것이 좋으며, 여기서 중요한 점은 어떤 프로그램을 사용하느냐가 아닌, 꾸준히 모두가 공유문서를 확인하고, 모두가 기록하는 습관을 가져야 한단 것에 있다.



문서화 작업은 누가 담당하는가?

누가?라는 특정 인물이 담당하는 것이 아닌 누구나 담당해야 하며, 의무감을 가져야 한다.

근무하는 기업에서 내 손이 닿는 곳에는, 모든 포지션분들이 배치되어 있었기에, 따로 문서작업 없이도 원활한 작업을 이어갈 수 있을 것이라고 생각했다. 하지만 개발 현황, 개발 일정에 대하여 정리된 문서가 따로 없다 보니 개발자에게 하루에도 똑같은 질문을 계속해야만 했다. "오늘 어떤 작업하세요? 이 작업 혹시 완료하셨나요?" 마케터에게도 같았다. "광고 문구 한 곳에 정리해 두어야 할 것 같아요." "최종 앱 설명 혹시 가지고 계시나요?"


기업 Notion - noonch 문서

초기 기업 Notion에는 템플릿을 사용해 멋지게 꾸미는 것에 초점을 맞추기보단 모두가 알기 쉽고, 빠르게 적응할 수 있게 간단하게 만들어 시작하였다.

디자인 이슈사항, 전체회의, 부분 회의를 통한 논의사항, 개발 현황, 개발 일정, 광고 일정, 마케팅 방향, 앱 등록 시 앱 설명, 키워드 등 모든 것을 노션에 정리해두었다.


기업 Notion - noonch 문서 - 변경사항 및 의견

실무에서 기업 노션 초기, 변경사항 및 의견 섹션을 예로 들면, 2월 19일 금요일 디자이너가 지역검색 관련 디자인 수정사항을 기록해두면, 지역검색을 담당하고 있는 프론트엔드 개발자가 확인 후 구현 완료 시 체크를 해 놓았다. 체크 표시 시점은, 디자이너가 작성한 내용이라도 디자인 변경이 이루어졌다는 건 개발도 함께 변경되어야 한다는 의미이기 때문에 개발자와 논의해보는 것이 좋다.


작성규칙은 모든 포지션이 참여하여 정하는 것이 좋으며, 시간이 걸릴 수는 있지만 초기에 잡아놓는 것이 좋다.

수정 및 요청사항에 요청 한 사람과, 처리한 사람이 구체적으로 존재할 경우 처리 완료 시 처리한 사람이 체크박스 처리를 완료한다.

아직 처리가 완료되지 않을(요청 중) 경우 텍스트를 빨간색으로 변경한다.

처리가 미완료된 건수들은 다음날 날짜로 넘어간다.


기업 Notion - App 출시 자료

App 출시 자료 섹션에는 App Store기준으로 이름, 부제, 개인정보 처리 방침 URL, 앱 미리 보기, 프로모션 텍스트, 키워드, 마케팅 URL, 설명 등 앱 출시를 위한 항목을 모두 정리해두었다. 추후 개발자는 App Store Connect에서 정보 입력 시 노션에서 복사하여 사용하면 된다.




기능을 추가하고 싶다면 소통 먼저

눈치 캘린더 기획을 하던 중 보낸 식사, 받은 식사, 확정 식사를 Dot Notification을 활용하여 사용자에게 알려주고 싶다는 생각을 하였다.

개발 관점에서 Notification은 앱 내에서 발생하는 알림 및 정보 전달 데이터가 새로 들어왔을 때 감지할 수 있어야 하는 기능을, 추가하는 것이기 때문에, 목표하는 1차 앱 출시 일과 기업 내부 일정을 토대로 회의하였다. 충분한 회의 후 결정된 사항에 대해선 노션에 정리해두었다.








02. 모바일 UI·UX 디자인

PM / Back-end Developer / Front-end Developer / Designer / Marketer - 전체 회의








02-1. 로그인

로그인 경험은 앱, 웹 사이트 또는 서비스로 들어가는 진입로이며, 사용자가 자신의 신원을 확인하는데 도움이 된다. 로그인 흐름은 일반적으로 메인 로그인 페이지와 회원가입, 비밀번호 찾기, 비밀번호 재설정 및 다른 방법으로 로그인하기 등 매우 복잡한 흐름으로 구성되어있다.



익숙한 경험 디자인

이 가이드라인은 디자이너가 가장 선호하는 가이드라인이 아닐 수는 있지만 간단하고 익숙한 레이아웃을 사용하는 것은 사용자에게 최고의 경험을 제공하는 것과 같다. 잘 알려진 용어와 문구를 사용하며 이를 통해 사용자는 자신 있고, 쉽게 작업을 수행할 수 있다.


좋은 경험 법칙은 사용자가 로그인 페이지에서 보내는 시간이 적을수록 좋다.
가능한 빨리 제품의 실제 장점과 가치를 발견할 수 있도록 해야 한다.


Pinterest / Linkedin - 로그인 페이지
Figma / Dropbox / Airbnb - 로그인 페이지

페이지 중앙에 로그인 양식을 유지하는 것이 좋으며, Form Field에 사용자가 정보 입력 전이라면 해당 단계에서 정확히 무엇을 해야 하는지 Placeholder Text를 통해 알려줘야 한다. 긴 설명 대신 간단한 문장('비밀번호 입력', 예시를 들어준다.)으로 마무리하는 것이 좋다. 유머, 복잡한 전문 용어, 기술 용어는 로그인 환경에 적합하지 않다.

만약 로그인 페이지에서 사용자에게 받아야 할 정보가 너무 많다면 단계를 나누는 것도 좋은 방법이다. 또한 다른 방법으로 로그인(간편 로그인) 할 수 있게 하여 유연성을 제공해야 한다.


익숙한 경험 디자인 참고 : A guide to designing successful Login experiences





noonch 로그인 페이지

noonch 로그인 페이지

이메일 아이디와 비밀번호를 입력할 수 있는 Form Field와 아이디 저장, 자동 로그인, 아이디 찾기, 비밀번호 재설정, 회원가입, 소셜 로그인으로 이루어져 있다.

사용자가 비밀번호를 잊어버렸을 경우 비밀번호 재설정을 위해 휴대폰 번호로 인증 또는 이메일 아이디로 인증 후 새 비밀번호를 설정할 수 있다.


비밀번호 재설정 → 휴대폰 본인인증 서비스를 통해 인증받는다. → 앱에서 바로 새 비밀번호 입력

비밀번호 재설정 → 이메일 아이디 입력 → 이메일로 비밀번호 재설정 이메일 발송됨 → 이메일을 통해 비밀번호 재설정


휴대폰 본인인증 서비스란, 본인 명의로 개통한 휴대폰을 사용하여 최소한의 개인정보(이름, 생년월일, 휴대폰 번호)를 입력하는 인증 절차를 거쳐, 본인 여부와 입력한 정보의 정확성을 확인해 주는 서비스이다.

휴대폰 본인 인증 서비스 : 아임 포트 다날 SMS 본인인증




 iOS 배포를 한다면 참고할 점

자사 로그인만 있을 경우 - Adroid, iOS 배포 문제없음

자사 로그인 + 카카오톡으로 로그인 - Adroid 문제없음, iOS 문제 있음(심사 통과를 시켜주지 않는다.)

iOS는 간편 로그인에 꼭 애플로 로그인을 포함하고 있어야 한다.


Apple로 로그인 필수

앱에서 사용자의 기본 계정을 설정 또는 인증하기 위해 타사 또는 소셜 로그인 서비스(Facebook 로그인, Google 로그인, Twitter로 로그인, LinkedIn으로 로그인, Amazon으로 로그인 또는 WeChat 로그인 등)를 사용하는 앱은 Apple로 로그인 역시 동등한 옵션으로 제공해야 한다. 사용자의 기본 계정은 사용자 식별, 로그인, 앱의 기능 및 연결된 서비스에 접근하기 위한 목적으로 앱에 설정한 계정을 의미한다.


App Store 심사 지침 - Apple Developer - 4.8 Apple로 로그인 참고




 유효성 검사

noonch 회원가입 - 왼: 사용자가 정보 입력하기 전 / 오: 잘못된 이메일 형식을 입력하였을 경우
noonch 회원가입 Forms Invalid Input Message - 왼: 사용자가 이미 가입하였을 경우 / 오: 비밀번호와 비밀번호 확인이 일치하지 않았을 경우
noonch 회원가입 - 왼: 모든 정보 입력 완료 / 오: 회원가입 완료 alert

사용자는 종종 실수한다. 자신이 이미 가입한 상태이지만 잊어버리는 경우도 있고, 비밀번호 설정 후 확인을 위해 동일한 비밀번호를 입력 시, 같지 않은 비밀번호를 입력할 수 도 있다. 사용자가 실수함과 동시에 유효성 검사는 시작된다. 그리고 즉각적으로 알려준다. "이미 사용 중인 아이디입니다. 다른 아이디를 사용해주세요."


제공된 데이터의 성공, 실패를 알릴 적절한 시기는 사용자가 정보를 제공 한 직후가 좋다.

또한 제공된 데이터의 정확성을 사용자에게 즉시 알려주기 때문에 실시간 인라인 검증이라고 할 수 있다. 이 접근 방식을 통해 사용자는 제출 버튼을 눌러 오류를 확인할 때까지 기다릴 필요가 없으며, 오류를 더 빨리 확인하고, 수정할 수 있다. 눈치의 경우, 잘못된 이메일 아이디를 입력한 후 비밀번호 Form Field를 선택함과 동시에 이메일 아이디 Form Field 아래에는 Invalid Input Message가 나타난다. 더불어 사용자가 <input type = "text">  <input type = "password">을 잘못 입력하였을 경우 나타나는 경고문구를 상황별로 문서화하여 개발자와 공유한다.


경고문구의 경우 타사 회원가입을 실제로 사용해보며, 일부로 틀리게 입력하여 파악하는 것도 좋은 방법이다.





사용자에게 필수항목 알려주기 '*'

noonch 자사 회원가입 - 필수 입력항목의 경우 Label 옆에 별표로 표시하였다.

사용자에게 필수로 입력해야 하는 항목임을 알려주기 위해 Label 옆에 별표로 표시를 해두는 것도 좋은 방법이다. 만약 사용자가 필수항목을 다 채우지 않은 상태에서 '제출' 버튼을 선택한다면 아예 넘어가지 않거나 alert를 통해 인지시켜준다. "빠짐없이 기재하였는지 확인해보세요."




 개인정보 처리 방침


App Store

App Store connect - 설정 - 개인정보처리 방침

모든 앱에는 App Store Connect 메타데이터 영역과 앱 내부에 쉽게 볼 수 있는 개인정보 처리 방침 관련 링크가 포함되어야 합니다. 개인정보 처리 방침은 분명하고 명시적으로 다음 요건을 준수해야 한다.


App Store 심사 지침 - Apple Developer - 5. 법적 요구 사항 참고


Google Play

Google Play Console - 스토어 등록정보 - 개인정보처리 방침

앱의 스토어 등록정보에 개인정보처리 방침을 추가하면 개발자가 민감한 사용자 및 기기 데이터를 어떻게 처리하는지 투명하게 알릴 수 있다.

개인정보처리 방침은 모든 인앱 공개와 더불어 앱이 사용자 데이터를 수집, 사용, 공유하는 방법(공유되는 대상의 유형 포함)을 포괄적으로 설명해야 한다.


Play Console 고객센터 - 검토를 위한 앱 준비 - 개인정보처리 방침




 본인인증

카카오톡 로그인 장점 : 로그인 시 본인인증이 필요 없다. (이미 인증된 사용자로 봐도 무방)

카카오톡 로그인 단점 : 추후 실명이 필요할 경우 본인인증 필요(카카오톡 정보에서 실명 데이터를 얻기가 불가능하다. 예를 들어 카카오톡 닉네임을 김효진이 아닌 효딘이, 효진이로 설정하였다면 김효진이 아닌 효딘이, 효진이로 불러와진다.) 카카오 로그인은 실명과 주민번호로 인증하는 것이 아니라 단순 카카오 닉네임 등의 정보만 조회하는 것으로 신뢰성이 떨어지기 때문에, 추가 인증 작업이 필요하다.

자사 회원가입 : 다날과 같은 본인인증 API가 필요하다.

출처 : kakao Developers / 실명 데이터 얻기가 불가능하다.
출처 : kakao Developers / 실명 데이터 얻기가 불가능하다.


noonch 본인인증

눈치의 경우 자사 회원가입, 카카오톡 로그인과 본인인증을 분리시켰다.


• 1. 메인 페이지에서 호스트 리스트 확인

• 2. 마음에 드는 호스트가 있다면 선택

• 3. 로그인

• 3-1. 회원가입 (이메일 아이디. 비밀번호, 서비스 이용약관 동의) → 로그인

• 3-2. 간편 로그인

• 4. 호스트 상세정보 확인

• 5. 식사 신청

• 6. 프로필 등록 (본인인증, 프로필 사진 등록, 사용자명, 직업, 눈치 이용 취지 입력) → 한 번 등록해 놓으면 다른 호스트에게 식사 신청 시 이 단계는 건너뛴다.

• 7. 식사를 희망하는 이유 입력


보통 자사 회원가입의 경우 사용자가 정보를 모두 입력하였다면, 마지막에 본인인증을 하는 것이 자연스러운 흐름이다. 그러나 카카오톡 로그인과 본인인증을 연달아 진행할 경우 사용자 입장에서 중복회원가입을 유도한다고 판다 하는 경우가 많았다(실제로 눈치 테스트 과정에서 사용자가 멈칫하는 경우를 발견할 수 있었다.).

자사 회원가입에서 본인 인증이 빠져 있기 때문에 사용자는 간단하고 빠르게 회원가입 완료 후 호스트 상세정보를 확인할 수 있다. 본인 인증 시 1-2분의 시간이 소요되기 때문에 이로 인한 이탈을 최소화하자는 의견도 반영되었다.








02-2. 메인 페이지(HOME)


콘텐츠가 더 있다는 것을 암시시켜주기

noonch - 메인 페이지 'HOME'

사용자는 디자이너의 생각보다 스크롤을 많이 하지 않는다. 특정 요인이 없는 이상 스크롤하지 않고 곧바로 검색 같은 내비게이션 아이콘을 선택한다. 스크롤하면 더 많은 콘텐츠가 있음을 예상할 수 있는 시각적인 단서를 제공해야 한다. 화면의 그리드를 정확하게 정렬한다면 앱/웹의 콘텐츠를 더 볼 수 있다는 예상을 할 수 없어 스크롤할 요인이 적어진다. 화면에 콘텐츠가 넘치게 정렬하여 사용자에게 스크롤이 가능하다는 시각적인 힌트를 제공해야 한다.




 평점

왼: noonch 메인 홈 / 오: 신규 캘린더 평점이 없을 경우 표시하지 않았다.

평점이 없는 호스트에게 '☆ 0.0 관련 후기 0개'이라는 표시가 필요 있을까? 또한 서비스 초기에는 평점이 없는 호스트가 더 많을 수 있다, 이런 경우 게스트가 메인 홈에 접근하였을 때 오히려 서비스에 대한 안 좋은 인식을 줄 수 있다. 게스트는 눈치라는 서비스가 초기단계 이기 때문에 호스트의 평점이 0개인 건지, 인기가 없는 호스트라 평점이 0개인 건지, 이용하는 사용자가 없기 때문에 호스트의 평점이 0개인 건지 알 수 없기 때문이다.


☆ 0.0 관련 후기 0개

☆ 0.0 관련 후기 0개

☆ 0.0 관련 후기 0개

☆ 0.0 관련 후기 0개

☆ 0.0 관련 후기 0개


네이버 쇼핑의 경우 5개 상품 중 리뷰와 평점이 없는 2개의 상품에는 별도의 표시가 없다.

네이버 쇼핑 - 스토어 상품 페이지


추가적으로 생각해볼 점은 만약 관련 후기가 28개가 있다면, 28개의 후기를 원페이지로 보여줄 것인지 그렇게 되면 페이지 길이가 엄청 길어질 것이다. 부분만 보여주고 더 많은 후기는 '자세히 보기' '18개의 후기 확인'을 통해 볼 수 있게 할 것인지 고민해봐야 한다.

예시 : 만약 식사 후기 28개를 원페이지로 보여준다면 페이지의 길이가 매우 길어질 것이다.

눈치의 경우 10개의 식사 후기를 확인할 수 있고, 더 많은 후기는 '자세히 보기'를 통해 확인할 수 있다.

서비스 초기단계이기 때문에 리뷰가 많지 않을 것을 대비하여 식사 후기 확인은 맨 아래에 자리하였다. 추후 사용자의 유입이 많아지고 후기가 쌓이기 시작하면 디자인 변경이 있을 것이다. 식사 후기가 중요한 포인트이기 때문에 기존 Fixed Tabs(정보 확인, 식사 신청하기) 사이에 식사 후기가 자리할 예정이다.

추후 디자인 변경 사항을 예상해보았다.




 가독성을 위해 중앙 정렬보다는 왼쪽 정렬

noonch 호스트 상세정보 확인

사용자는 F패턴으로 콘텐츠를 훑어본다. 중앙 정렬은 F패턴으로 읽을 경우 가독성이 떨어진다.

왼쪽 정렬은 모든 문장의 첫 번째 글자가 동일한 기준 선에 배치되어 새로운 행의 시작을 찾는 것이 쉬워 자연스럽게 읽힌다. 중앙 정렬은 각 행의 첫 번째 글자가 들쑥날쑥해 시선의 흐름이 자연스럽지 않고 훑어보기에 적합하지 않다. 이로 인해 눈의 피로가 발생할 수 있어 많은 양의 글에는 가운데 정렬을 피하는 것이 좋다. 특히 이동 중일 경우 사용자는 읽기를 포기할 수도 있다.


콘텐츠가 더 있다는 것을 암시시켜주기, 가독성을 위해 중앙 정렬보다는 왼쪽 정렬 참고 : 모바일 UI/UX 기본 가이드-1편 참고




  <textarea> 최소, 최대 글자 수 / 이미지 업로드

자기소개, 이용 취지, 경력사항, 식사 희망 이유, 식사 리뷰 등 이번 서비스에는 사용자가 텍스트를 입력해야 input form이 많다. 그렇기 때문에 사용자가 텍스트를 입력하는 동안 카운팅 되고 있는 글자 수를 즉각적으로 피드백해줄 필요가 있다.

최소 글자 수를 정한 이유는, 한 글자만 입력해도 다음 챕터로 이동이 가능하다면, 메인 페이지 호스트 리스트에는 영양가 없는 정보가 넘쳐날 것이다. 그렇게 되면 신규 사용자의 입장에서 볼거리가 없고 흥미를 느끼지 못할 것이다. 이탈률은 증가할 것이다.


자기소개 : 최소 10자, 최대 4000자

눈치 이용 취지 : 최소 10자, 최대 70자

경력사항 : 최소 10자, 최대 1000자

식사 희망 이유 : 최소 10자, 최대 4000자

식사 리뷰 : 최소 10자, 최대 4000자

프로필 이미지 최소 1장, 최대 10장

기업 notion - noonch 문서 - noonch UIUX
noonch 리뷰 작성 / input 폼에 입력된 글자 수를 즉각적으로 알려준다.




 공통 프로필 등록

번개장터 / 중고나라 / 팔라고 / 헬로마켓 - 상품등록 페이지


noonch 공통 프로필 등록

프로필 이미지는 눈치에서 매우 중요한 부분을 차지하기 때문에 디자인에 대한 고민을 많이 하였다.

이미지 등록이 필수인 중고거래 플랫폼 대부분을 다운로드하여보고, 직접 상품등록을 해보면서, 사용자들이 익숙한 디자인을 경험할 수 있도록 다양한 서비스를 사용해보았다. 카메라 아이콘은 사진을 찍거나, 찍은 사진을 확인하는 의미를 담고 있고 있다. 그렇기 때문에 '프로필 이미지를 등록하려면 카메라 아이콘을 선택해주세요.'라는 안내를 따로 하지 않아도 사용자는 자연스럽게 이미지를 업로드하기 위해 카메라 아이콘을 선택할 것이다.

사용자가 Action Sheets에서 '앨범에서 사진 선택'을 선택하면 최대 이미지 업로드를 10장까지로 제한을 두었으니 10장 이상부터는 선택되지 않는다. 첫 번째 선택 이미지는 대표 이미지로 고정이며, 나머지 9장의 이미지는 스와이프를 하여 확인할 수 있다. 이미지 업로드 시에는 사진 각각마다 개별 삭제를 할 수 있는 삭제 버튼이 있어야 한다.


얼굴 확인 어려울 경우, 수정 요청이 있을 수 있습니다.

권장 사이즈: 800*400px, 등록 가능한 파일 형식: jpg, png

프로필 이미지 최소 1장, 최대 10장


이미지 업로드 시 몇 가지 규정사항을 명시해주며, 기준으로 잡은 사이즈 이상, 이하로 사용자가 업로드하게 되면 이미지가 눌리지 않고 자연스럽게 잘리거나, 사용자가 직접 이미지를 자를 수 있게 개발자분에게 요청하였다.




 Checkboxes

noonch - Checkboxes

사용자가 항목 목록에서 옵션을 선택하지 않거나 하나 또는 여러 개 선택할 수 있는 경우 체크박스를 사용해야 한다. 버튼은 정사각형이어야 하며 선택 시 체크 표시 또는 X가 있어야 한다.


 Radio

라디오 버튼은 사용자가 항목 목록에서 하나의 옵션만 선택할 수 있을 때 사용해야 한다. 버튼은 원형이 어야 하며 선택 시 채워져야 한다. 라디오 버튼의 모양은 체크박스와 구별되게 디자인하는 것이 중요하다.








02-3. 캘린더


 게스트 캘린더

캘린더에서는 나의 점심 일정을 한눈에 확인할 수 있다. 한 달, 일주일 단위로 일정을 확인할 수 있으며, 식사 요청 건에 대하여 확인, 취소할 수 있고, 추후 식사 신청이 확정되면 리뷰도 작성할 수 있다.



 View 모드

noonch 게스트 캘린더 왼: 기본 / 31일 확인 / 7일 확인

눈치 캘린더의 뷰를 변경하기 위해선 Topbar에 있는 31, 7 달력 아이콘 버튼으로 조정한다.


• 좌측 화면 : 사용자가 캘린더에 접근하면 보이는 기본 뷰이다. 달력에는 Dot Notification이 의미하는 색을 통해 대략적인 일정을 한눈에 확인할 수 있다. "2021년 1월 26일에는 호스트에게 식사 신청을 보냈지만 아직 검토 중이구나!"

Purple Dot Notification : 게스트가 호스트에게 식사 신청을 보낸 경우, 보낸 식사

Green Dot Notification : 호스트가 확인 후 식사 수락을 하였을 경우, 확정 식사

오늘 날짜에는 블루 컬러의 정원으로 표시되어있고, 특정 날짜를 선택하면 무 체색의 정원으로 표시된다. Dot Notification으로 표시된 날짜를 선택하면 화면 하단에 일정이 나온다. 날짜 옆에는 총 몇 건의 일정이 있는 확인할 수 있으며, 식사 요청을 보낸 호스트의 프로필 이미지를 확인할 수 있다. 또한 Tag를 통해 사용자에게 현재 상태를 제공한다. 최재영 호스트에게 식사 신청을 하였고 상태는 '요청 중'이다.


• 중간 화면 : Topbar에 있는 '31 달력 아이콘'을 선택하면 뷰가 변경된다. 기본 뷰에서 볼 수 있었던 일정은 없어지고 달력을 크게 확인할 수 있다.


• 우측 화면 : Topbar에 있는 '7 달력 아이콘'을 선택하면 뷰가 변경된다. 선택한 날짜 기준으로 1주일 일정을 확인할 수 있다.




 일정 확인, 보낸 식사

noonch 캘린더에서 보낸 식사 확인

 일정 확인, 확정 식사

noonch 캘린더에서 확정 식사 확인

기본 뷰에서 호스트 프로필 이미지를 선택하면 상세한 일정 확인이 가능하다.

간략한 호스트 상세정보를 확인수 있으며, 식당을 선택하면 해당 네이버 플레이스 페이지로 이동한다. 눈치 이용 취지, 도움받을 수 있는 분야, 대화 주제도 확인 가능하다.


보낸 식사와 확정 식사의 상세 일정 페이지의 가장 큰 차이점은, 호스트와의 식사가 확정 나면 리뷰를 작성할 수 있는 섹션이 등장한다. 쇼핑몰과 동일하게 리뷰에 대한 중요도가 높기 때문에 리뷰 작성을 유도하였다.

 



 달력 디자인 시스템

최대한 군더더기 없는 디자인을 추구하였다.

noonch 캘린더 달력 디자인 시스템








02-4. 식사 등록

처음 눈치를 사용한다면 모두가 게스트이다. 만약 호스트가 되어 식사 등록을 하고 싶다면, 마이페이지, 호스트 신청을 하여 승인이 되면 식사를 등록할 수 있다.

Step 1 : 식사 가능 날짜 선택, 식사 가능 시간 입력

Step 2 : 식당 검색 후 등록 / 만나서 또는 채팅으로 식당 정하기

Step 3 : 점심 시 나누고 싶은 대화 주제 입력 or 선택


Step 1 : 식사 등록 - 식사 가능 날짜 선택, 식사 가능 시간 입력

noonch 식사 등록 - 날짜 선택

날짜를 다중 선택하는 유형은 항공사 가는 날, 오는 날 날짜 선택에서 자주 사용된다. 시작과 끝(예 : 20일과 31일)을 선택하면, 20일부터 31일 안에 있는 모든 요일이 선택되지만, 임의로 다중 선택된 날짜 중 특정 날짜를 제외할 수는 없다.


눈치의 경우 다중 선택, 단일 선택, 특정 날짜 제외도 하고 싶은데 이럴 경우 어떻게 하면 좋을까?


다양한 의견이 나왔는데, 그중 단일 선택을 기본으로 하되, 단일 선택이 불편한 사용자를 위해 '한 달 선택하기' 기능을 추가하여 오늘 날짜를 기준으로 남아있는 날짜 모두가 자동 선택되고, 그중 제외하고 싶은 날짜가 있다면 해당 날짜를 선택하면 자동 제외되는 흐름으로 정해졌다.




 Step 2 : 식사 등록 - 식당 검색 후 등록, 만나서 또는 채팅으로 식당 정하기

noonch 식사 등록 - 식당 검색
noonch 식사 등록 - 식당 선택 후 등록

사용자가 지역, 지하철 명으로 식당을 검색하였을 경우 잘 정리된 식당 리스트를 보여주고 싶었다.

예를 들어 '노원 맛집'이라고 검색하였을 경우 네이버 플레이스에서 가져올 수 있는 정보는 아래와 같다. 가져올 수 있는 정보가 한정적이기 때문에 어떻게 활용하면 좋을지 고민하였다.


{
  "title": "oooo횟집",
  "link": "",
  "category": "한식> 생선회",
  "description": "",
  "telephone": "",
  "address": "서울특별시 ooo ooo ooo-oo oo빌딩 o층",
  "roadAddress": "서울특별시 ooo ooo oooo oo oo빌딩 o층",
  "mapx": "318695",
  "mapy": "558658"
},


사용자가 검색하는 유형은 다양하다 강남이라는 지역 뒤에 맛집, 카페, 샐러드와 같은 음식 관련 정보를 함께 입력하면 좋겠지만, '강남' 이라고만 검색하는 경우도 있다. 이런 경우 강남 당구장, 강남 노래방, 강남 방탈출과 같이 음식점과 관련 없는 장소가 함께 검색될 수 있기 때문에 개발자분들이 방법을 모색하였다.








02-5. 눈치 톡

확정된 호스트와의 세부 일정은 눈치 톡에서 실시간으로 스케줄 조율이 가능하며, 식사 리뷰도 작성할 수 있다. 1:1 채팅을 원칙으로 하기 때문에 친구 초대, 그룹채팅 기능은 구현하지 않았다.


▪ 채팅 유입 유도

호스트가 식사 신청 수락을 한다면 알림으로 'ooo호스트님이 식사 수락을 하였습니다. 식사 전 간단한 대화를 나눠보세요.' → 앱 내 채팅을 사용할 수 있게 계속 유도하였다.

Notification



▪ 채팅 알림

읽은 알림과 읽지 않은 알림은 시각적으로 다르게 디자인하여 사용자가 이를 구분할 수 있어야 한다.

읽지 않은 알림 / 읽은 알림
noonch 채팅방 리스트 / 채팅방 나가기

Number Notification

noonch - Number Notification

유저가 반드시 인지해야 하는 정보이며, 알림의 개수가 특히 중요한 경우에 사용한다. 더불어 확인하지 않은 새 알림 개수를 표시하고, 새 알림의 개수는 1~99까지만 세며, 100 이상일 경우 99+로 표시한다.

눈치의 경우 채팅 리스트에서 확인할 수 있다.



▪ 채팅방

noonch 채팅방

날짜를 기준으로 구분선을 사용하여 나눴다.

프로필 이미지의 경우 상대방의 프로필 이미지만 보인다.

Topbar의 호스트 이름을 클릭하면 해당 호스트의 상세정보 페이지로 이동한다.

오른쪽 햄버거 메뉴바에서는 약속 취소와 채팅방 나가기 기능을 사용할 수 있다.

Topbar 밑으로 점심 약속 날짜가 Fixed 되어있다.

아직 메시지를 보낼 수 있는 기능만 구현되어 있지만, 추후 이미지, 카메라, 파일을 보낼 수 있는 기능도 추가 구현할 예정이다.

noonch 식사 취소 신청
noonch 식사 취소 신청 완료 / 완료 후에는 상대방과 채팅이 불가능하다.
식사 취소 신청 후 상대방과 대화 불가능



noonch 채팅 디자인 시스템








02-6. my page

마이페이지에서는 프로필 편집, 호스트 신청, 평점관리, 지난 식사, FAQ, 고객센터, 설정, 알림을 확인할 수 있다.


 로그아웃

noonch 마이페이지 - 설정 - 로그아웃

로그아웃을 일부러 유도하는 서비스는 없다고 생각하기 때문에 최대한 숨겨주는 것이 좋다고 생각한다.

로그아웃은 보통 두 가지 유형이 있다.

1. 마이페이지 → 설정(톱니바퀴) → 맨 밑으로 스크롤 → 로그아웃

2. 마이페이지 → 맨 밑으로 스크롤 → 로그아웃

메인 페이지가 무한 스크롤이 아닌 경우, 맨 밑으로 스크롤하여 로그아웃 하는 방법도 있지만, 메인 페이지가 무한 스크롤되는 경우가 많기 때문에 보통 마이페이지에서 로그아웃 한다.

왼: 오늘의 집 마이페이지 - 설정 - 로그아웃 / 오: 네이버 메인 페이지 - 로그아웃(네이버 메인 홈은 무한 스크롤이 아니다.)




신규회원, 기존 회원

noonch 마이페이지 왼 : 신규회원 / 오 : 기존 회원

로그인 하기 전인 마이페이지와 로그인 후 마이페이지의 디자인을 각각 작업하여야 한다.  

noonch 스케줄 왼 : 신규회원 / 오 : 기존 회원

위와 같은 맥락으로 눈치 캘린더의 경우 사용자가 로그인 전이라면 로그인을 유도하기 위해 호스트 추천 리스트를 보여준다.








02-7. 기타


 Notification

Notification은 눈치 앱 내에서 발생하는 알림 및 정보를 전달한다.


Dot Notification

noonch - Dot Notification

유저가 반드시 인지해야 하는 정보를 나타낼 때 사용한다.



Number Notification

noonch - Number Notification

유저가 반드시 인지해야 하는 정보이며, 알림의 개수가 특히 중요한 경우에 사용한다. 더불어 확인하지 않은 새 알림 개수를 표시하고, 새 알림의 개수는 1~99까지만 세며, 100 이상일 경우 99+로 표시한다.

눈치의 경우 채팅 리스트에서 확인할 수 있다.




 Iconography 

초기 오픈 소스 아이콘을 사용하자는 의견도 나왔지만, 눈치의 특징을 살려주는 밥, 숟가락, 포크 등의 아이콘은 오픈 소스에서 찾기 어려웠으며, 일관성 있는 둥근 모서리와 선 굵기를 위해 직접 기획하기로 하였다.

noonch - icon




 Position Fixed Button 또는 Call To Action Button

noonch 호스트 상세정보 확인 - Call To Action Button '식사 신청'

콜 투 액션은 사용자의 반응을 유도하는 행위 혹은 요소를 의미한다. 웹사이트에서 흔히 보는 ‘배너’, ‘버튼’, ‘링크’ 등이 속한다.

콜 투 액션 버튼의 경우 사용자가 스크롤하더라도 버튼을 지속적으로 볼 수 있어야 하며, 쇼핑몰 상세화면 하단의 '상품 구매하기', 'Buy', '바로 구매, '장바구니', '선물하기' 버튼은 콜 투 액션 버튼이라고 할 수 있다. 이 버튼을 통해 사용자는 상품의 상세정보를 스크롤하며, 자유롭게 확인하다가도 언제든 바로 구매를 할 수 있다. 눈치의 경우 호스트 상세정보를 확인하다 마음에 들었을 경우 식사 신청을 하기 위해 다시 위로 스크롤하여하는 것이 아닌 콜 투 액션 버튼을 통해 언제든 신청할 수 있다.




 삭제와 같이 되돌릴 수 없는 액션의 경우, 확인 요청한다.

noonch - alert

사용자가 실수로 항목을 삭제하거나 작성 도중 페이지를 나갈 경우 되돌리기는 어렵다. 이런 경우 사용자에게 정말 페이지를 나가려고 하는 것이 맞는지 확인요청을 해야 한다.




 Select box default

noonch

Select Box의 기본 값을 항상 설정해줘야 한다. 눈치의 경우 메인 페이지의 호스트 리스트를 최신 등록순과 마감 순으로 확인할 수 있다. 이때 디자이너는 사용자에게 최신 등록순을 기본 값으로 두고 보여줄 것인지, 마감 순을 기본 값으로 두고 보여줄 것인지 명시해줘야 한다.

Select Box의 구성요소가 적거나 단어가 간단한 경우 버튼 요소로 보여주는 경우도 있지만, 눈치의 경우 추후 리뷰 순, 인기순 등 추가 예정이 있기 때문에 Select Box를 사용하였다.




 반응형도 함께 생각하기

noonch 메인 페이지 호스트 정보

메인 페이지 호스트 정보를 예로 들면, 아이폰 XS기준으로 작업하였지만, 만약 가로가 좁아졌을 때도(아이폰 6, 7, 8, SE) '세상 사는 소소한 이야기들과, 새로운 소식 IDEA에 대한 토론을 즐겨합니다.'라는 문장을 줄 내림 하여 전체를 보여줄 것인지, 아니면 2줄로 픽스하고 잘리는 부분은 '...'으로 표시해줄 것인지 고민하여야 한다.

정보의 중요도에 따라 중요한 정보라면 가로폭이 좁아지더라도 줄 내림하여 전체 문장을 볼 수 있게 하여야 한다. 이 부분은 개발자에게 중요한 요청사항이 될 수 있음으로 정해지는 대로 문서화는 필수이다.


기업 Notion - noonch 문서 - noonch UIUX




 혹시 모를 맞춤법 검사는 필수










신규 서비스 출시 시리즈 목차

신규 서비스 출시(#1)_디지털 프로덕트 제작 프로세스

신규 서비스 출시(#2)_브랜딩

신규 서비스 출시(#3)_UI 프로토타이핑

신규 서비스 출시(#4)_모바일 앱 디자인(현재)

신규 서비스 출시(#5)_UI 디자인 시스템 공유




김효진 소속 직업디자이너
구독자 376
매거진의 이전글 신규 서비스 출시(#3)_UI 프로토타이핑

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari
브런치 시작하기

카카오계정으로 간편하게 가입하고
좋은 글과 작가를 만나보세요

카카오계정으로 시작하기
페이스북·트위터로 가입했다면