2023-02-05: 개인 프로젝트 도전기 (3주차)
목표 정산
이번 주 목표로 둔 사항들은 아래와 같다. 저번과 동일하게 완료한 사항은 취소선을 그었다.
[필수]
와이어 프레임 작업 진행대기 입력 페이지 구현
[희망]
- Jest를 이용해 대기 입력 페이지 테스트 코드 작성 및 적용
StoryBook 학습- StoryBook을 활용한 대기 입력 페이지 A안/B안 테스트 적용
저번 주의 분량을 잘못 정한 덕분에 큰 깨달음을 얻고 이번 주는 최대한 한 주에 내가 할 수 있는 분량을 책정하여 시도해봤다.
이전에 비해서는 목표를 작게 해도 이룬 게 많은 만큼, 성취감이 많이 느껴졌다. 이 페이스로 작업을 계속해서 진행해보도록 하자.
와이어 프레임 분투기
그림(애니메이션이나 만화 등)을 보는 것도 좋아하고, 여러 앱을 이용해보거나 게임을 하는 것은 좋아하지만 그렇다고 해서 눈 앞에 보이는 UI 디자인을 잘 꾸며내는 것은 다른 이야기인 것 같다.
미루고 있던 와이어 프레임을 Figma를 통해 만들어보기 시작했는데, 계속 해보면서 디자인을 보는 것과 만드는 것은 확실히 차이가 있는 것 같다.
저번에 찾아놓은 레퍼런스와 그 밖에 현재 실제로 서비스 중인 나우웨이팅, 테이블링, 메뉴잇 등의 이미지들을 참고하여 와이어 프레임을 만들어보기 시작했다.
미숙하다보니 디자인 자체를 깔끔하게, 예쁘게 만들기는 쉽지 않았고 대신 최대한 기능적인 배치를 어떻게 하면 좋을지를 고민해보며 작업했다.
디자인을 생각하고 작업하느라 시간이 오래 걸리기는 했지만, 작업하면서 내가 필요한 기능들이 무엇인지를 깨닫게 되기도 했고 그 덕분에 점점 구현에 대한 윤곽이 잡혀가는 것 같다.
폰트는 가독성 등을 고려할 때, 역시 ‘프리텐다드’가 역시나 무난한 것 같아 그 쪽으로 택했다.
남은 건 컬러링인데, adobe color를 통해서 선정해보려고 하고 메인 컬러가 의미가 있는 색이면 좋겠다고 생각하므로 색상의 의미를 조사하고 그를 기준으로 나눠보려고 한다.
와이어 프레임을 짜는 과정에서 저번 주 회고에도 작성한 내용이지만 대기 입력 페이지의 화면 구성을 한 화면으로 보여줄지, 아니면 페이지를 넘겨가면서 설정하는 식으로 잡을지, 유저 입장에서는 스크롤과 탭 중에 어떤 쪽이 편할지 궁금해진 감이 있었다.
A안과 B안으로 나눠 테스트해보는 게 좋겠다고 생각했는데 어떻게 테스트를 해볼까 고민하다가 개발자답게 개발 화면으로 테스트해보는게 좋다고 생각하여 미루고 있던 StoryBook 학습을 진행해봤다.
필수가 아닌데도 궁금해서 해버린 StoryBook 학습
StoryBook 공식 사이트에서는 ‘UI 컴포넌트 및 페이지 개별적으로 빌드하기 위한 프론트엔드 워크숍’이라고 자신을 설명하고 있다.
StoryBook을 활용하면 각 페이지별로 컴포넌트들이 동작하는 방식이나 순서를 마치 책을 써내려가듯이 정리해볼 수 있고, 이를 통해 전체 빌드가 아닌 한 페이지 혹은 컴포넌트만을 빌드하여 빠르게 기능 테스트를 할 수 있다는 장점이 있다.
말 그대로 하나의 페이지가 어떤 식으로 동작하는지 그 흐름을 보여주는 점에서 ‘스토리’ + ‘북’인 것 같다.
학습하기 위해 영상 자료를 참고하거나, 공식 문서 및 타인이 정리한 자료들을 찾아보며 공부해봤다. 참고한 자료들은 아래와 같다.
스토리북에서 Component Story Format (CSF) 란?
공부해보면서 느낀 Storybook의 큰 장점은 간단하게 UI를 만들고 그걸 디자이너와 공유하며 빠르게 의사소통을 공유하는 점에 특화됐다는 점이다.
여러가지 케이스별로 변화를 조건을 나누고, 그걸 적용시킴으로서 디자이너들이 궁금해하는 상황별 UI 상태를 보여줄 수 있으며 개발자 입장에서는 디자이너들이 생각하는 조건들을 타입으로 관리할 수 있다보니 UI에 필요한 요소를 빠르게 캐치할 수 있다.
아울러, 이렇게 케이스가 나뉘다보니 테스트 코드를 이용해 각 케이스별 문제점들을 파악하는 데에도 특화될 수 있다는 것이 StoryBook을 사용하기 좋은 이유라고 생각된다.
학습 중에 TypeScript의 interface 문법도 나오고 그래서 이해가 덜 된 부분을 학습하느라 시작이 더뎌지면서 학습 내용도 많이 진행하진 못 햇는데, 이왕 이렇게 된 거 다음 주까지 차근차근 스텝을 밟아가면서 진행해보려고 한다.
https://github.com/DrunkenNeoguri/practice_storybook
대기 입력 페이지 구현 진행
StoryBook과 추가적인 TypeScript 문법 학습으로 인해 개발 자체를 방치해두고 있었다.
그래서 뒤늦게나마 대기 입력 페이지를 다시 구현해보기 시작했다.
저번에 작업하고 남아있던 사항들은 다음과 같았다.
- 시력이 낮은 손님을 위해 폰트를 확대시켜줄 버튼
입력한 정보가 맞는지 다시 한 번 확인시켜 줄 모달창입력한 정보들이 양식에 맞는지 검증해 볼 유효성 검사- 외국인일 경우 페이지 이용에 어려움이 없도록 글로벌로 전환해줄 버튼
(이번 주차에 완료한 사항들은 취소선을 그었다.)
우선은 위의 내용들을 우선으로 작업하고 남은 시간에는 CSS 스타일을 조정하려 했는데, 사람마다 신경쓰는 요소가 다르다고 기능보다 CSS를 우선해버려서 정작 주요 기능인 두 개를 구현하지 못했다..
작업 이야기를 하니 떠올랐는데, 토요일에 잠시 코딩하는곰(@codingbear03) 님과의 모각코 자리에서 React에서의 CSS 프레임워크인 Chakra UI를 영업당했다.
구경해본 결과 Tailwind CSS와 되게 비슷한 느낌이면서도, React에 최적화된 느낌이고 내가 원하는 기능들(예를 들어 ‘토스트 메시지’라던가)이 구현되어 있었다.
구경하면서 너무나도 큰 매력을 크게 느껴서 styled-component로 구현한 사항들을 다음주 중에 Chakra UI로 전부 변경해보려고 한다. 안되면.. 다시 styled-components로 회귀하는 거고..
아무튼, 이런저런 사유로 방치해 둔 페이지를 와이어프레임에 맞춰 진행하니 일단은 대기 입력 페이지의 구현을 어느 정도 마쳤다.
이제 저시력 이용자들을 위한 버튼 적용이나, line-height 등의 CSS 조정이나 언어 변경 등의 이슈가 있겠지만, 아무튼 그것들도 다음주 중에 끝내보려고 노력하자.
다음 주에 할 일들
다음 주에는 금요일에서 일요일까지 창원에 내려가는 일정이 있다.
오래 코딩은 하지 못하겠지만, 그래도 최대한 해볼 수 있는 것들을 정리해보고자 한다.
- A/B안 설계
- 기존 A안의 와이어프레임은 만들어졌으니 B안의 와이어프레임 생성 필요
- StoryBook을 좀 더 학습해서 A안과 B안으로 케이스를 나뉘어 만든 뒤, SNS 사람들에게 의견을 좀 받아보고 싶다.
- 페이지 구현
- 대기 입력 페이지와 대기 상태 확인 페이지까지 구현
- 그리고 회원가입, 로그인, 비밀번호 변경 등 form 위주로 굴러가는 페이지 위주로 빠르게 구현해보고 싶다.
- [희망] Firebase 연동
- 위의 과정을 다 완료했으니 Firebase를 연동하여 입력한 데이터를 FireStore에 저장하거나 Firebase Auth를 통해 계정 관리까지 이어볼 수 있으면 좋겠다.
- 다음 주 시간이 허락한다면 말이다.
- 위의 과정을 다 완료했으니 Firebase를 연동하여 입력한 데이터를 FireStore에 저장하거나 Firebase Auth를 통해 계정 관리까지 이어볼 수 있으면 좋겠다.
와이어 프레임을 다 만든 이상, UI 구현에 크게 걸릴 점은 없어보이고 이제 구현하면서 Firebase 연동을 진행해봐야할 것 같다.
그리고 어느 정도 일단락되면.. 남은 것은 이제 React-Query와 Recoil을 활용하는 점인데, 현재 페이지에서 상태 관리의 필요성을 크게 느끼진 못하고 있어서 이 점이 지금의 고민이다.
아직 구현 사항이 덜 된 점도 있으니 구현하다보면 분명 필요해질 타이밍이 있을 것이라 생각하고 지금은 현재의 사항에 집중해보도록 하겠다.
3주차까지 진행한 과정을 되돌아보면서, 한가지 크게 느낀 점이 있다. 바로 아르바이트를 마친 뒤의 급격한 피로 누적으로 인해 집중력의 저하가 너무나도 크다.
이 피로 부채를 해결하지 않는 한은 어려울 것 같은데, 마땅한 방법이 안 떠오른다.
역시 이제는 운동을 해야하나.. 날이 풀렸으니 조금씩 달리는 시간을 마련해봐야겠다.
