소개
1편에서는 한 해를 돌아보며 회고하는 웹 서비스를 MVP로 간단하게 만들었는데요.
주요 기능을 만든 후, 서비스적으로 어떤 기능을 추가했을 때 더욱 의미가 있을지를 생각해보며
2차 수정/보완 작업을 진행했습니다.
진행 방법
사용한 툴 : Replit
ㄴ 복잡한 개발 환경 세팅 없이도 브라우저에서 바로 코드 작성 -> 실행 -> 배포가 가능
ㄴ 배포 시, URL이 자동 생성되어 빠르게 MVP를 만드는 용으로 적합한 툴로 보여짐추가한 기능 :
1) 1~12월 기록이 모두 완료된 결과 화면을 이미지로 저장하는 기능2) 사용자의 의견을 수집하는 기능
이 기능들은 언제, 어떤 방식으로 노출해야 자연스러울지 UX적인 부분을 고민하여
프롬프트를 Replit에 입력했습니다.
특히, 웹페이지를 이미지로 저장하는 기능을 구현하면서 html2canvas에 대해 알게되었습니다.
DOM → Canvas → Image 변환
: 웹에서는 특정 영역(DOM)을 그대로 캡처해서 Canvas로 렌더링한 뒤, 이미지 파일(png 등)로 변환 가능
기능 자체가 간단하다보니 큰 이슈 없이 기능 추가 & 배포까지 잘 마무리되었는데요.
최종 결과물이 어떤 구조로 구현이 되었는지 탐색하는 시간을 가졌습니다.
[브라우저]
└─ index.html
└─ main.tsx ← React 시작점
└─ App.tsx ← 전체 UX 흐름 제어
├─ Onboarding (첫 진입)
├─ Home (월 카드 12개)
├─ MonthDetail (월별 기록)
└─ 공통 Provider들
├─ React Query
├─ Tooltip / Toast
프론트엔드는 React + Vite 기반
ㄴ 각각 정확히 어떤 역할인지 몰랐기 때문에 한 번 더 공부했습니다.
ㄴ React는 UI를 컴포넌트 단위로 쪼개서 만드는 라이브러리 (*상태가 바뀌면 화면이 자동으로 다시 그려짐) → “12개월 카드 + 상세 페이지 + 팝업 + 애니메이션”을 컴포넌트로 만듦
ㄴ Vite는 리액트가 만든 걸 브라우저가 이해할 수 있게 배포 가능한 웹 파일로 변환하는 역할
Express 서버 포함된 풀스택 템플릿을 썼으나, 현재 서비스에서 활용은 X
(MVP 기능에 로그인, 서버 저장 등의 기능이 없고 IndexedDB로 브라우저에 저장하는 방식을 쓰고 있음)
전체적으로 이러한 구조로 작동되고 있었다는 걸 코드를 통해서 한 번 더 확인할 수 있었어요.
결과와 배운 점
첫 사례글을 쓸 때는 서비스의 핵심 기능을 빠르게 만들어보는 행위에 집중했고,
만들어진 결과물이 어떤 구조로 되었는지 사실 큰 관심이 없었는데요.
이번에는 Replit이 만들어 준 결과물이 어떤 기술 스택과 구조로 되어있는지 뜯어보는 시간을 가지면서
몰랐던 구조도 알게 되었고, 개발 이해도 역시 조금씩 올라가는 것 같아서 만족스러웠습니다!
