Nutri Capture 방향성 - 채팅 UI

#1 기존 UI 비판

#1-1 스크린샷

지금까지 진행한 프로젝트의 스크린샷이다. 아래는 이 화면의 문제점들이다.

 

#1-2 중첩된 Container

'날짜 카드' Container 안에는 '식단' Container가 들어가는데, 이렇게 포장지가 2중으로 들어가면 사용자 입장에서 피로감이 생기기 쉽다. 

 

#1-3 '0으로 처리된' 여백

'식단'이 없는 '날짜'도 Container가 생긴다. 그러한 '날짜' Container는 아무런 정보 없이 (정확히는 해당 날짜에 기록된 '식단'이 없다는 정보를 제외하고) 자리만 차지한다. 이른바 '0으로 처리된' 여백이다. 정보가 없으면 생략(null)하면 됨에도, 생략하지 않았다(0)는 의미다.

 

#1-4 낯선 스키마(Schema)

낯설다. 제일 단순하면서도 제일 주요한 단점이다. 낯선 느낌을 없애기 위해서, 사용자가 일상적으로 경험하는 UI를 '모방'할 필요가 있다.

 

#2 채팅 UI

#2-1 모방할 Schema: 카카오톡

위(카카오톡 스크린샷)와 같은 채팅 앱 화면 구조를 그대로 가져올 것이다. 대화 상대는 자기 자신이다.

 

#2-2 UI 스케치 (구조 잡기)

한 겹의 Container

'식단' Container만을 컨텐츠로서 표시한다.

 

여백 다이어트

날짜 정보는 기존처럼 별도의 Container로서 자리를 차지할 게 아니라, 마치 SNS 게시글에 곁들어지는 해시태그처럼 '식단' 정보에 곁들이는 방식으로 변경한다. 날짜 Container를 삭제함으로써 View에서의 공간 활용도가 높아질 것이다 (빈 공간을 이른바 '0이 아니라 null로' 처리).

 

익숙한 스키마

현대인은 거의 매일 보는 채팅 UI를 모방한다.

 

#2-3 구조에 대한 사용자의 인식 

대화 상대의 프로필 사진 (UI 스케치의 1번)

실제 채팅 앱에서 상대방의 프로필 사진은 상대방의 '상태'를 의미한다. '식단의 상태'는 여러 가지가 있겠으나, 영양 정보는 '나'가 보낼 메시지 속에 담겨있으므로 식단을 먹은 시각을 프로필 사진이 표현하게 만든다

 

'나'의 프로필 사진 (UI 스케치의 2번)

숫자를 쓸 것이다. '나'의 말풍선에는 영양 정보를 쓸 건데, 해당 영양 정보의 종합 점수다.

 

대화 상대의 말풍선 (UI 스케치의 3번)

식단의 이름을 쓴다. 프로필 사진은 시각을 그림으로 표현할 것이므로, 말풍선 부분에 정확한 시각을 숫자로 기입해도 좋을 것 같다.

 

'나'의 말풍선 (UI 스케치의 4번)

영양 정보가 담긴다.

 

#3 요약

채팅 UI를 도입했다. 다음 게시글부터 바로 해당 UI를 구현한다.