[런치캐치 개발일지 #6] 찜 목록·쿠폰함 구현과 디자인 변경

About this offer

이번 스프린트에서 사용자 앱의 찜 목록과 쿠폰함·QR을 만들었다. 시안을 화면으로 옮기면서 사용자 입장에서 다시 보고 디자인을 바꾼 부분이 있다. 각 화면에서 어떤 점이 불편했고 어떻게 바꿨는지 적어 둔다. 1. 찜 목록 위치 시안 찜 목록은 단독 화면이고, 헤더 오른쪽에 "쿠폰함" 링크가 있다. 쿠폰함은 사용 가능 / 사용 내역 두 탭이다. 쿠폰함 화면에는 찜 목록으로 가는 길이 없다. 마이페이지의 "찜한 캠페인" 메뉴로만 갈 수 있다. 변경 내용 쿠폰함 탭을 찜 목록 / 사용 가능 / 사용 내역 세 탭으로 나눴다. 탭 주소 찜 목록 /coupons/wishlist 사용 가능 /coupons 사용 내역 /coupons/history 찜 목록은 쿠폰을 받는 곳이다. 찜 → 받기 → 사용이 한 탭 안에서 이어지는 게 자연스럽다. 시안 구조에서는 쿠폰함을 눌러도 찜 목록으로 갈 방법이 없어서, 사용자가 마이페이지까지 가야 한다. 하단 쿠폰함을 누르면 점심때 가장 자주 찾는 사용 가능 (QR) 탭이 열린다. 11:00 선착순 때는 스와이프 헤더의 "찜 목록"이나 10:50 알림으로 들어오므로 찜 목록 탭이 바로 열린다. 탭마다 주소가 있어서 알림이나 다른 화면에서 원하는 탭으로 바로 열 수 있다. 2. 찜 카드 구조 시안 카드(사진, 가게 이름, "메뉴 · N원 할인", 상태) 아래에 사용 시간과 버튼이 카드 밖에 따로 있다. 마감, 하루 한도 상태에도 회색 버튼([마감], [오늘 발급 한도 3개 완료])이 있다. 받는 중 상태는 따로 그려져 있지 않다. 변경 내용 1. 사용 시간과 버튼을 카드 안으로 넣기 버튼이 카드 밖에 있으니 [받기]가 위 카드 것인지 아래 카드 것인지 헷갈렸다. 흰 카드 하나가 가게 하나가 되도록 묶었다. 2. 오른쪽에 원래 가격과 할인가 정렬 쿠폰은 하루 3개까지만 받을 수 있어서, 찜이 여러 개면 그중 어떤 걸 받을지 골라야 한다. "N원 할인"이 문장 중간에 있으면 카드끼리 비교하기 어렵고, 실제로 얼마를 내는지도 계산해야 한다. 가격을 오른쪽 끝에 맞추니 훑어보기만 해도 비교된다. 3. 마감, 하루 한도 상태 버튼 삭제 "마감 · 수량 소진" 상태 줄과 [마감] 버튼이 같은 정보를 두 번 보여줬다. 큰 회색 버튼이 화면을 차지해서 받을 수 있는 카드가 덜 눈에 띄었다. 오픈 전 [11:00 오픈] 버튼은 남겼다. 11:00에 같은 자리가 [받기]로 바뀌어서, 사용자가 미리 손가락을 올려둘 수 있다. 4. 받을 수 있는 카드 맨 위로 정렬 찜한 순서대로 보여주면 11:00 선착순에 마감된 카드를 지나서 [받기]를 찾아야 한다. 받을 수 있음 → 받음 → 마감·한도 순으로 정렬했다. 5. 받는 중에는 버튼 색 유지 처음에는 버튼을 비활성( disabled )으로 막았는데, 비활성 버튼은 회색이라 마감처럼 보였다. 디자인 시스템 버튼에 Loading 속성이 있어서, 색은 그대로 두고 글자 자리에 도는 아이콘을 보여주는 loading 옵션을 만들었다. 수정 전 수정 후 3. 찜 삭제 시안 찜 목록 하단에 "찜 취소는 가게 상세에서 할 수 있어요"라고 적혀 있다. 변경 내용 카드 오른쪽 위 ✕ 버튼으로 바로 삭제하고, "찜 목록에서 삭제했어요 [되돌리기]" 토스트를 4초 보여준다. 받은 쿠폰 카드에는 ✕가 없다. 요구사항에는 "찜한 캠페인 삭제: 사용자가 찜한 캠페인을 목록에서 삭제한다"가 필수로 있었다. 시안과 요구사항이 서로 달라서 요구사항을 따랐다. 확인 모달 대신 되돌리기를 넣어, 실수로 눌러도 바로 되돌릴 수 있게 했다. 4. QR 화면 시안 사용 가능 쿠폰에서 [QR 보기]를 누르면 "쿠폰 사용" 화면으로 넘어간다. 뒤로 가기를 눌러야 쿠폰함으로 돌아온다. 변경 내용 QR을 별도 화면 대신 바텀시트 로 띄웠다. 사용 가능 쿠폰 카드를 누르면 쿠폰함 위로 시트가 올라오고, 그 안에 QR을 보여준다. QR 화면은 매장 계산대 앞에서 직원에게 보여주는 화면이다. 뒤에 사람이 기다리고 있을 수 있어서, 빨리 열고 빨리 닫는 게 가장 중요하다고 봤다. 열기: 작은 [QR 보기] 버튼이 아니라 카드 어디를 눌러도 시트가 올라온다. 급하게 열 때 정확히 버튼을 노리지 않아도 된다. 닫기: 시트를 끌어내리거나 바깥을 누르면 바로 닫힌다. 화면이 바뀌지 않아서 보고 있던 쿠폰함 그대로 돌아온다. 다른 쿠폰 보기: 쿠폰이 여러 장이면 닫고 바로 옆 카드를 누르면 된다. 별도 화면에서는 뒤로 갔다가 다시 들어가야 했다. 뒤로 가기 문제: 별도 화면은 알림이나 링크로 바로 들어왔을 때 이전 페이지가 없어서, 뒤로 가기를 누르면 앱 밖으로 나갈 수 있었다. 시트는 화면 이동이 없어서 이 문제가 없다. 시트 안에서는 직원이 봐야 하는 QR을 가장 크게 두고, 남은 시간은 QR 아래 작은 글자로 내렸다. 시안 (별도 화면) 변경 (바텀시트) 5. 멘토링 반영 멘토링에서 받은 피드백 중 사용자 앱 부분을 반영했다. 첫 탭 이름 첫 탭 이름을 "스와이프"에서 "오늘 점심"으로 바꿨다. "스와이프"는 화면을 쓰는 방법(넘기기)만 설명하고, 이 화면에서 무엇을 하는지는 알려주지 않는다. 이 화면은 10:00~12:59에만 열리고 오늘 점심 쿠폰 포스터를 보고 찜하는 곳이다. 서빙 시간 외에 나오는 "내일 10시에 만나요" 화면과도 자연스럽게 이어진다. 아이콘도 좌우 화살표(⇄)에서 숟가락·포크로 바꿨다. 좌우 화살표는 "교환"처럼 보일 수 있어서, 이름과 같은 뜻의 아이콘을 골랐다. 찜 배지 헤더 찜 배지에서 주황 동그라미를 빼고 주황색 숫자만 남겼다. 멘토링에서 숫자만 있어도 된다는 피드백을 받았다. 스와이프 화면 튐 카드를 넘기기 전과 후의 포스터 iframe을 비교해 보니, 뒤에 있던 카드가 앞으로 올 때 이미 그려진 포스터를 옮기지 않고 새로 그리고 있었다. 넘길 때마다 포스터 두 장을 다시 그리고 사진도 다시 요청했다. 앞 카드와 뒤 카드를 한 목록에서 카드마다 같은 key로 그리도록 바꿨다. 뒤 카드가 앞으로 와도 같은 요소라 크기와 위치만 바뀐다. 세 번째 카드까지 숨겨서 미리 그려 두었다. {cards.slice(currentIndex, currentIndex + 3).map((card, position) => ( <div key={card.serveId} {...(position === 0 ? cardProps : {})}> <PosterCard card={card} /> </div> ))} 수정 후 넘길 때 다시 그리는 포스터는 0장, 사진 재요청도 0번이 됐다. 느낀점 사용자 입장에서 화면을 하나씩 다시 고쳐 나가니 점점 나아지는 게 보여서 작업이 재밌어지고 있다. 오늘 멘토링에서는 생각하지 못했던 부분들을 짚어 주셔서, 앞으로 어떤 부분을 어떻게 개발해 나가야 할지 조금 정리가 됐다.