🍋 레몬로그 감정일기, 더 좋은 작성 경험을 위한 새로운 UX 구조 제안— Paging + Swipe 단계 진행 방식 도입기

감정일기를 작성하는 과정은 단순한 기록이 아니라,
사용자가 하루를 돌아보고 감정을 정리하는 심리적 여정(Psychological Journey) 입니다.

 

지금까지의 레몬로그는 이 과정을 하나의 긴 화면에서 처리해왔습니다.

 

감정 선택 → 상황 → 생각 → 다른 관점 → 다음 행동 → 이미지 첨부 → 저장
이 모든 과정이 한 화면 안에 눌러 담겨 있었기 때문에
입력해야 할 영역이 많아지고, 스크롤 길이가 길어지면서
사용자 피로도가 증가하는 문제가 있었습니다.

 

그래서 이번에 우리는 감정일기 작성 UX를 완전히 새롭게 재해석하고,
"Paging + Swipe 기반 단계 진행 방식" 을 도입하기로 결정했습니다.

⭐ 기존 방식의 문제점

1. 너무 많은 입력 필드가 한 화면에 몰려 있음

감정일기 작성은 실제로 4~5개의 질문에 답해야 하는 꽤 긴 작업입니다.
하지만 기존 UI에서는 모든 질문이 한 화면에 펼쳐져 있어
처음 보는 사용자에게는 "너무 많다…", "언제 끝나지?" 같은 느낌을 줍니다.

2. 스크롤 기반 입력 피로도

스크롤을 많이 해야 하는 UI는 "길다", "귀찮다"는 감정을 불러옵니다.
특히 모바일 앱에서는 텍스트 입력이 많은 만큼 피로도가 커집니다.

3. 진행 상태를 알기 어려움

현재 내가 어느 단계에 있는지, 얼마나 남았는지 알 수 없기 때문에
작성 완료를 향한 동기부여가 줄어듭니다.

---

⭐ 새로운 UX: Paging + Swipe 기반 단계 진행 방식

우리는 감정일기 작성 경험을 "작은 단계의 연속" 으로 재구성했습니다.
사용자 심리학과 여러 심리치유 앱(CBT 기반 앱)의 구조를 참고했으며,
특히 아래 UX 원칙을 도입했습니다.

🍋 UX 원칙

• 한 번에 하나의 질문만 제시하기
• 각 단계는 짧고 간단해야 한다
• 진행률을 시각적으로 보여주어 완료 욕구를 자극하기
• Swipe + Next 버튼 두 가지 방식 모두 지원하기

이 원칙은 집중력을 높이고
사용자가 부담 없이 감정일기를 끝까지 작성하도록 돕습니다.

 

🔥 새로운 감정일기 작성 흐름

아래와 같은 구조로 변경됩니다.

PAGE 0 → 감정 선택  
PAGE 1 → 상황 입력  
PAGE 2 → 생각 입력  
PAGE 3 → 다른 관점 입력  
PAGE 4 → 다음 행동 입력  
PAGE 5 → 날짜 + 이미지 선택  
PAGE 6 → 완료 화면

 

이 방식의 장점은 명확합니다.

---

⭐ 장점 1. “작고 쉬운 질문” → 사용자 부담 감소

심리 상담에서도 많은 질문을 한 번에 던지기보다는
하나씩 천천히 진행하는 것이 훨씬 효과적입니다.

페이지가 분리되면 사용자에게는
“질문 하나만 답하면 된다”
라는 부담적은 인터페이스가 됩니다.

---

⭐ 장점 2. 진행 상황이 시각적으로 보인다

각 페이지는

• “1 / 6”
• “2 / 6”
  이런 식으로 진행률을 표시할 수 있습니다.

이는 마치 게임의 퀘스트처럼
“조금만 더 하면 끝!”이라는 동기부여를 줍니다.

---

⭐ 장점 3. 터치 UX를 그대로 활용한 Swipe 동작

사용자는 자연스럽게 오른쪽 → 왼쪽으로 스와이프하여 다음 단계로 이동할 수 있습니다.

동시에
하단의 ‘다음’ 버튼으로도 이동이 가능합니다.

즉, 아래 두 가지 방식 모두 지원합니다.

스와이프	직관적이고 자연스러운 네이티브 제스처
Next 버튼	입력 완료 후 확실하게 다음으로 넘어가는 행동

 

이 두 기능은 상호보완적이며 UX를 강력하게 업그레이드합니다.

---

⭐ 기술 구현: UICollectionView + Paging

우리가 선택한 기술적 토대는
UICollectionView + pagingEnabled 입니다.

이 방식은 다음을 자연스럽게 지원합니다.

• 가로 페이징(swipe)
• 애니메이션 전환
• progress indicator
• 각 페이지별 레이아웃 독립성
• Next 버튼 → 특정 page로 scroll
• State 기반 저장/취소 로직 연결

또한 ViewController를 여러 개 만들 필요가 없습니다.
모든 단계는 하나의 UICollectionView 내부에서 셀로 표현되기 때문에
구조가 단순해지고 유지보수가 쉬워집니다.

---

🧠 왜 ViewController 여러 개 방식은 사용하지 않았을까?

VC를 여러 개 push하는 방식은:

• 네비게이션 스택이 너무 깊어지고
• 관리해야 할 상태가 많아지고
• 애니메이션도 덜 자연스럽고
• 뒤로가기가 사용자 UX를 오히려 깨뜨리기 때문입니다.

반면,
Paging 방식은 스토리텔링형 UX에 특화된 기법입니다.

---

🍋 결론: 감정일기 작성 경험을 한 단계 더 높이는 UX 개편

이번 개편의 목표는 단순했습니다.

“감정일기를 쓰는 과정이 더 쉽고, 자연스럽고, 감성적이어야 한다.”

 

Paging + Swipe 방식은
레몬로그의 정체성과 감정 중심 UX를 강화하며,
사용자가 부담 없이 끝까지 감정일기를 완성할 수 있도록 돕습니다.

앞으로 레몬로그의 감정일기 화면은
더 부드럽고, 더 따뜻하고, 더 사용자 친화적인 경험으로 발전할 것입니다. 🍋