Nutri Capture 방향성 - 고유인지감각, 새 UI 스케치

#1 사용자의 속마음

#1-1 나쁜 사용자 경험의 요소: 높은 피로감

Nutri Capture 방향성 - 살아남는 앱이 되려면

위 게시글에서 Nutri Capture를 살아 남는 앱으로 만들겠다는 포부를 밝혔다. 그러려면 사용자가 원하는 것이 무엇인지 알고 정확하게 제공해야할테다. 식단 관리... 이전에 나는 여기에서 사용자가 자신이 먹은 영양 기록을 수치로 입력하는 내용의 UI 스케치를 했었다. 자신이 먹은 음식의 양과 영양분을 칼같이 계산하고, 그걸 매번 기록하는 게 정말로 사용자가 원하는 경험이 맞을까?
 

#1-2 식단 기록을 하고 싶은 것이지, 수학 문제를 풀고 싶은 게 아니다

우리는 로봇이 아닌데 말이다. 대체 어느 사용자가 매 끼니 그리고 매 간식마다 영양 성분을 검색하고ㆍ음식에서 어떤 영양소의 비율을 산정하고ㆍ그걸 또 하나하나 일일히 기록하겠는가? 만약 그런 앱이 있다면, 3일 내로 완전히 질려버려 접속조차 하지 않을 것이고 마지막엔 결국 삭제될 것이다. 사용자는 수학 문제 풀이를 기대하며 앱을 설치한 것이 아니다.
 

#1-3 꾸준히, 원하는 규칙대로 식사하기

사용자가 정말 원하는 것은 자신이 원하는 식사의 규칙을 그저 지켜나가는 것이다. 식단 관리 앱은 그걸 보조해야지, 방해해서는 안 된다.
 

#2 나의 방향

#2-1 무릎보호대와 고유인지감각

이미지 출처: https://www.bauerfeind.com/b2c/Products/Knee-Braces/GenuTrain%C2%AE-Knee-Brace/p/YPBF_BAK_GENUTR

헬스와 러닝을 열심히 하던 때에, 무릎이 아파서 보호대를 찾아본 적이 있었다. 그 중 어떤 보호대 회사의 제품 홍보 문구가 아직도 기억에 남는다. 바로 고유인지감각(Propriocept)에 대한 문구다. 보호대의 효과는 관절의 가동범위를 물리적으로 제한하고 충격 쿠셔닝을 하는 것 외에, 정신적인 측면에서의 이점도 제공하는데 그것이 바로 고유인지감각이다.
 
고유인지감각이란 내 몸의 각 부분이 어디에 위치하고 있는지를 인지하는 감각이다. 눈을 감고도 자기 코를 만질 수 있고 내 몸의 각 부분이 어디에 위치하고 있는지 아는 고유인지감각 덕이다. 고유인지감각 세포는 피부에 가장 많이 분포하는데, 무릎 보호대는 넓은 피부를 고른 압력으로 눌러주기에 착용자의 고유인지감각을 크게 향상시킬 수 있다. 즉, 보호대를 착용하기 이전보다 무릎을 더 잘 인식하게 된다. 결과적으로 무릎에 과도한 충격을 더 잘 감지하여 알아서 몸을 사릴 수 있게 되는 것이다.
 

#2-2 사용자는 '수치'가 아닌 '느낌'을 원한다

#1에서 비판했던 내용은 기존 UI 스케치의 높은 피로감이었다. 이 피로감은 '수치에의 집착'에서 비롯된다. 반대로 이제부터는 Nutri Capture에서 수치에 대한 내용을 완전히 배제하려고 한다. 내가 어떤 영양소를 '얼마나' 먹었는지를 기록하되, 그 '얼마나'를 숫자로 기록하게 만들지 않을 거라는 얘기다. 이 방식으로 앱을 만들면, 프로 운동선수의 식단 관리처럼 정밀한 수치 추적은 불가능할 것이다. 그러나 식단을 관리해나가고 있다는 고유인지감각의 제공은 여전히 가능하다.

#2-3 화장실 체크리스트

그렇다면 그 '고유인지감각'을 어떻게 활성화시키는가? 나는 앱을 하나의 체크리스트로 만들려고 한다. 하루에 한 번씩 화장실의 상태를 체크하는 화장실 체크리스트처럼, 매 끼니 매 간식마다 터치 몇 번으로 '나만의 식단 체크리스트'를 완성할 수 있게 만들 것이다. 그 구현의 자세한 내용은 #3에서 다룬다.
 

#2-4 체크리스트 개인화

식단 관리의 주제는 사용자마다 천편일률적이다. 어떤 사용자는 당을 줄이는 것이 주요 목표일 수도 있고, 어떤 사용자는 탄수화물 다이어트, 또 어떤 사용자는 매 끼니에 섬유질을 포함하는 게 목표일 수 있다. 사용자가 원하는 것만 추려 선택할 수 있어야 한다. 앱 최초 실행 시에 어떤 목적으로 본 앱을 설치했는지 묻고 체크리스트에 반영하자. 당연히 이후 얼마든지 재설정이 가능하다. 현재 막 떠오르는대로 체크리스트 요소들을 작성해보면,
 

1. 과식 정도
2. 단순당
3. 정제 곡물
4. 밀가루
5. 섬유질
6. 단백질
7. 나트륨

위와 같은 목록이 도출된다. 일반적으로 많이 먹어서 좋은 것은 파란색, 많이 먹어서 나쁜 것은 빨간색으로 표시했다. 이 목록은 본 게시글이 최초 작성된 현재(2024년 10월 3일) 시점에서의 목록에 불과하다. 앱을 만들며 계속 업데이트해나가야 할 것이다.
 

#3 UI 스케치

#3-1 이전 UI 스케치 폐기

Nutri Capture 방향성 - UI 스케치

위 게시글은 이전에 작성했던 UI 스케치다. 이 스케치는 #1 ~ #2의 내용과 상반된다. 따라서 폐기하고 새로운 형태로 다시 짜겠다.
 

#3-2 LazyColumn

[Android] Jetpack Compose - Lazy Column

위 게시글처럼 LazyColumn을 가장 기초적인 베이스로 잡을 것이다. 무한 스크롤을 구현할 것인데, 순서는 시간에 따른 내림차순이다. 즉, 위로 스크롤하면 과거의 기록으로 가고 반대로 아래로 스크롤하면 미래로 간다. 하나의 날짜를 하나의 CardView로 구성할 예정이다.
 

#3-3 청사진 (Blueprint)

'먹은 것'을 추가하는, '먹은 것 추가하기 버튼'은 따로 만들지 않을 것이다. 대신 터치하는 즉시 '먹은 것'이 생겨나는 청사진을 제공할 것이다. 터치 횟수를 최소화하기 위함이다 (피로감 낮추기). 아래에 있는 새 UI 스케치를 보자.
 

#3-4 새 UI 스케치

(1) 날짜별 CardView
이전 UI 스케치와 동일하다
 
(2) 먹었던 식품 정보 - 시각

1. 새벽: 하늘색(연한 파란색)
2. 아침: 파란색
3. 점심: 파란색과 주황색의 중간색
4. 저녁: 주황색
5. 밤: 보라색
6. 심야: 검은색

시각이 쓰인 부분은 배경색이 존재하는데, 입력된 시각에 따라 알아서 지정된다. 그라데이션으로 연속적인 색상을 표현할 것이다.
 
(3) 먹었던 식품 정보 - 아이콘
#2-4에서 말한 '개인화된 체크리스트'의 각 요소를 아이콘으로 표현한다. 해당 요소에 대한 평가가 '좋다'라면 청록색, '나쁘다'라면 빨간색으로 표현할 것이다. 아이콘을 터치해 상태 변경이 가능하다. 아이콘이 많은 경우 가로 스크롤을 통해 화면에 보이지 않는 아이콘을 볼 수 있다. 스크롤하는 대신, ▼ 버튼을 눌러 전체 아이콘을 볼 수도 있다. 새로운 창에 뜨게 만드는 것은 피로하므로 아이콘 컨테이너 크기 자체를 늘어나게 만드는 편이 좋겠다. ✖ 버튼은 삭제를 위함이다.
 
(4) 청사진
'먹었던 식품 정보' UI와 동일하지만, 약간 흐릿하게 보이게 만든다. 이를 클릭하면 흐릿했던 모습이 또렷해지며 '먹었던 식품 정보'로 변신한다. 또, 그 순간의 시각이 기본값으로서 입력된다 (당연히 시각 부분을 터치하면 변경도 가능하다).
 

#4 요약

피로감을 낮추기 위해, 앱의 구조를 뜯어고치고 UI도 갈아엎었다.