타임핀 - 유튜브 타임라인 기반 메모 서비스

Day 3 - 프론트엔드 개발에 집중하다

어제는 백엔드 개발에 올인했다면 오늘은 프론트엔드 개발에만 집중했습니다
비즈니스 로직을 구현했다기보단 기본적으로 사용되는 컴포넌트들과 전체적인 페이지 레이아웃을 잡아 나가는 데에 집중했어요
저는 프론트엔드를 개발할 때 컴포넌트를 조립해서 개발하는 방식인 CDD(Component Driven Development)를 좋아하는데 주로 Storybook 이란 도구를 활용해서 컴포넌트를 설계하고 문서화시키는 방식으로 진행합니다.
기본적인 디자인 시스템은 Replit이 만들어 준 틀을 그대로 사용하고 구현하기 귀찮은 디테일한 컴포넌트들도 Headless UI와 Replit이 만들어준 컴포넌트를 그대로 이용하면서 개발하고 있어요.
AI와 더불어 바이브 코딩을 활용하니 기존에 해왔던 전통적인 개발 방식에 비해서 비약적인 생산성 향상이 가능했던 것 같습니다.
그리고 원래대로라면 기능 단위로 작업을 끝냈을 것 같은데 전체적인 개발 생산성에서는 지금 방식처럼 '백엔드 API 몰아서 개발 -> 프론트엔드 컴포넌트 몰아서 개발' 이런 방식도 상당히 유용한 것 같습니다.

✅ 하루만에 구현한 컴포넌트 수: 13개

- AddCard
- AddFolderCard
- FolderCard
- NoteCard
- AddFolderModal
- AddNoteModal
- SearchBar
- PageTitle
- SectionTItle
- FloatingFooter
- FloatingFooterItem
- SideBarIcon
- SideBarItem

금일 회고

잘했던 점
 

- 무슨 작업을 할지 선택과 집중을 잘했던 것 같아요
- 욕심부리지 않고 최대한 기존에 있던 디자인을 활용하려고 했어요

아쉬웠던 점

- 디자인 감각이 떨어지니까 최종적으로 어떤 디자인으로 가져갈지 혼란스러워요
- 오늘 하려던 분량의 70% 정도밖에 진행하지 못했어요

요약

- 디자인은 아무나 하는 게 아니다