#08화 UX 점검 과정단계

바이브코딩으로 일기웹 개발하기

바이브코딩을 할 때 사용자플로우를 ChatGPT가 생성해 주는 기본적인 구조를 기반으로

시작하는 경우가 있습니다. 처음에 그 구조대로 할 것인지, 디자이너 입장에서 다른 플로우를 추가한다면 이를 고려해서 인포메이션 아키텍처를 ChatGPT에 해당 구조를 공유하면 더 매끄러운 개발이 될 것입니다.

프로덕션 점검 시나리오 (스모크 테스트)

메인 리스트 로딩 OK (파이어스토어 읽기 권한 정상)

✍️ 오늘 일기 작성 클릭 → 작성 페이지 이동

새 일기 생성 → 자동저장 동작 확인

리스트에 감정 라벨(� 행복 등) 표시 확인

로그아웃/로그인 플로우 정상

모바일(375~390px) 레이아웃 확인

위의 점검 시나리오를 파악한 후,

우선 일기 리스트에서 리스트가 쌓인 경우 월마다 봐야 하는 필터기능이 필요해 보였지만

우선 모바일에서 좀 더 최적화되도록 디자인을 수정하는 스텝을 진행하기로 했습니다.

잠들기 전, 블루스크린을 많이 보면 좋지 않을 것 같아 다크모드도 고려했지만

더 추후에 적용해보려고 합니다.

현재 아주 간단한 구조의 일기웹

일기작성과 감정기록을 한눈에,
또 감정이모티콘을 인식할 수 있도록
디자인의 가독성을 높이자

디자인 Develop 단계

제가 원하는 색상은 노을 지는 보랏빛 바다의 달을 생각했어요.

달이 떠있는 동안 마음이 차분해잔 상태에서

일기를 쓰는 모습을 상상하면서요!

해당 색상을 바탕으로 기본요소를 디자인으로 가이드를 만들었습니다.

수정할 주요 요소

1. 프라이머리 버튼

2. 라인버튼과 삭제버튼

3. 이모티콘 감정 리스트 카드

4. 로고 상단추가

As-IS > To-Be

이전에는 흰 배경과 레이아웃 및 여백이 잘 맞지 않았죠. 로고도 없는 상태였지만

모바일과 PC를 고려해서 프로토타입을 만들었습니다.

그리고 소스를 직접 수정했습니다.

버튼 디자인 수정하기

버튼 디자인을 리액트 소스를 붙여서 수정할 부분과 함께 프롬프트로 요청하였습니다.

버튼의 색상 부분도 실제로 테스트를 거쳐서 최종 시안과 동일하게 만들었습니다.

감정카드 요소 UX 개선하기

모바일, PC 두 화면에서 감정을 선택하기 좋도록 터치, 드래그, 키보드 3가지 모두 작동하도록

코드를 수정했습니다. 셀렉트 리스트로 했으면 수정사항도 없었겠지만

디자인의 완성도를 높이고자 7시간 가까이 끙끙거리면서 해냈습니다!

아래는 이전에 바이브코딩이 만들어준 UI인데요. 선택하기에 리스트 선택이 작아 보이고,

디자인이 전체적으로 감정을 선택하는데 감성적이지 못한 UI로 생각되어서 이 부분을 많이 변경하고자 했습니다.

감정선택 리스트 As-IS

적용된 PC 화면

그리고 시각장애인이 스크린리더에서도 확인할 수 있도록 보이지 않는 코드를 적용했습니다. 나중에 음성으로 일기 남기기 기능도 있다면 좋을 것 같다는 생각을 했어요.

그리고 Style 디자인 수정은 피그마의 색상을 추출해서 직접 수정해보기도 했습니다.

선택한 감정을 맨 앞으로

PC 화면에서 우측에 있었던 해당 감정을 선택하면, 선택한 감정이 보이지 않는 경우가 있어서

맨 앞에 나오도록 했어요! 선택된 순서를 앞으로 할 수 있는지 물어보니 ChatGPT가 해당 소스를 알려줍니다.

모바일 화면 개선

반응형으로 하다 보니 여러모로 화면의 비율이 깨지거나, 키보드 작성 시 불편한 부분들을 개선했어요.

모바일 적용된 화면

이렇게 직접 수정하고 배포하다 보니 시간이 많이 흘렀네요.

제가 이렇게 만들다 보니 UX개선을 향상하는 과정은 생각보다 쉽지 않다는 것을 경험했습니다.

처음부터 이런 구조를 잘 고려해서 프롬프트를 작성하여 만드는 방법을 보다 연구해야겠다는 생각을 했고요.

무엇보다도 제가 일기웹 하나 만들면서, 좋은 일기앱이 있는데 무턱대고 시작을 했던 호기심이 이 과정까지 오게 되었는데 디자인을 할 때 중요시해야 하는 부분도 배우게 되었습니다.

우리가 기록하는 이유는 여러 가지가 있겠지만, 기록을 하는 과정이 삶의 중요한 요소라고 생각해서

그 부분을 조금이라도 개선시키는데 중요성을 느끼는 작업이었습니다.

정말로 디테일하나로 많은 것이 개선되기도 하니까요!

여기까지 일기웹 개발일지를 마치겠습니다.