Save Your Time을 하는 이유
"시간을 아끼자"를 주제로 한 프로젝트를 진행하고 있었습니다. 회사에 입사하기 전, 프로젝트의 모든 측면을 체험하고 숙달시키기 위해 최선을 다하고 있었습니다. Figma를 사용하여 디자인 작업을 수행하면서 px를 em으로 변환해야 하는 일이 빈번히 발생했습니다.
이로 인해 여러 번 "px to em converter"라고 검색하여 다양한 웹 사이트를 방문하며 이러한 변환 작업을 경험하게 되었습니다. 그런 과정에서 "이걸 내가 만들어 볼까?"라는 아이디어가 떠올랐습니다. 이 변환 도구를 자주 사용할 것으로 예상되었으며, 기존의 px to em converter 사이트와 비슷한 기능을 가지면서도 변환된 값을 클립보드에 복사해 주는 기능이 빠져 있어 아쉬웠습니다. 따라서 이 기능도 추가하고자 계획 중입니다.
그러나 이 변환 도구만을 위해 웹 사이트를 개발하는 것이 아쉽게 느껴졌습니다. 그래서 원래의 계획은 단일한 "px to em converter" 사이트로 만족하려고 했으나, "시간을 아끼자"라는 주제를 더 넓게 바라보고자 결정하게 되었습니다. 그래서 "Save Your Time"이라는 웹 사이트를 개발을 목표 하게 되었습니다. 이 사이트는 개발자들이 편리하게 사용할 수 있는 다양한 주제의 도구와 자료를 제공하는 곳으로, 시간을 아끼고 생산성을 높일 수 있도록 돕기 위해 만들 것 입니다.
이번 프로젝트에 시도해볼 것
- 테스트 자동화 (Git Flow)
테스트 자동화는 꼭 시도해보고 싶었던 분야였습니다. 이전까지는 기능 구현에 집중하느라 테스트 자동화를 배우지 못한 것이 아쉬웠습니다. 이번에는 Storybook과 여러 가지 테스트 도구를 활용하여 테스트 자동화를 구현하고자 합니다. 이를 통해 기업에 입사하기 전에 이 영역에 익숙해지는 것이 중요하다고 생각하다고 생각해서 이번 프로젝트에 넣어보았다. - Sass
원래는 Tailwind CSS와 Styled Components를 사용하여 스타일링을 진행했었습니다. 그러나 Tailwind CSS는 프로젝트 규모가 커질수록 클래스 이름이 길어져 가독성이 떨어진다는 단점이 있었고, Styled Components는 이번 Next.js에서 공식 지원하지 않아 설정이 복잡해 보였습니다. 또한 이번 프로젝트에서는 동적으로 스타일이 변경될 가능성이 적어서 CSS in JS를 사용할 이유가 없었습니다. 그래서 CSS in CSS인 Sass를 연습하고자 했습니다. - Docker
저는 외부에서 노트북 안에서는 데스크탑으로 작업을 합니다. 이로 인해 환경 설정의 차이로 인한 문제로 지칠 때가 있었습니다. 이러한 문제를 해결하기 위해 Docker를 도입하여 동일한 환경에서 작업할 수 있도록 하기로 결정했습니다. 또한 테스트 자동화를 할 때도 동일한 환경에서 작업해야 한다고 생각하여 Docker를 활용하기로 마음먹었습니다. - Pull Request
지금까지는 브랜치를 거의 사용하지 않고 커밋과 푸시만으로 작업을 진행했습니다. 그러나 실제로 개발 현장에서는 브랜치를 적극 활용하고, 다른 팀원과 협업할 때 풀 리퀘스트를 사용하는 경우가 많다고 들었습니다. 회사에 입사하기 전에 이러한 협업 방식을 미리 익혀보고자, 각 작업마다 브랜치를 만들고 풀 리퀘스트를 통해 브랜치를 메인 브랜치에 합치는 경험을 쌓아보고 있습니다.
프로젝트 진행 과정
-
LowFi (Low Fidelity) 디자인 단계:
먼저 LowFi 스케치를 사용하여 간단한 밑그림을 그립니다. 이를 통해 UI 배치와 기본 기능을 미리 구상해봅니다. -
MidFi (Medium Fidelity) 디자인 단계:
LowFi 단계에서 그린 스케치를 기반으로 Figma나 유사한 디자인 툴을 사용하여 MidFi 디자인을 작성합니다. 이 단계에서는 UI의 구조와 레이아웃을 더 상세하게 설계합니다. -
HiFi (High Fidelity) 디자인 단계:
MidFi 디자인을 기반으로 하이파이 디자인 시스템을 구축합니다. 실제 사용자 인터페이스의 디테일한 부분을 다듬고, 색상, 폰트 등을 최종적으로 정의합니다. 제대로 된 UI 배치를 구성합니다. -
초기 설정 단계:
코딩을 시작하기 전에 필요한 초기 설정과 테스트 자동화 과정을 완료합니다.
- Git Flow 방식을 설정하여 협업을 관리합니다.
- Docker를 활용하여 동일한 개발 환경을 구성합니다.
- Storybook과 Sass를 연결하여 스타일링과 컴포넌트 관리를 준비합니다.
- Pull Request를 테스트하고 리뷰하는 연습을 합니다.
- 테스트 자동화 도구를 설정하고 테스트를 실행해봅니다.
- 코딩 단계:
초기 설정이 완료되면, 계획을 기반으로 컴포넌트 단위로 UI와 기능을 구현합니다.
코드를 작성하고 테스트 자동화 도구를 활용하여 기능을 검증합니다.
걱정되는 것
이번 프로젝트는 제가 자주 사용할 사이트이며, 처음 시도해보는 것이 많아서 러닝 커브가 가파른 부분이 몇 개 보입니다. 그래서 프로젝트 진행이 더디어질까 걱정이됩니다.
