혼자서 새로운 사이드 플젝을 시작하기로 마음 먹었다.
첫번째는 아이디어 선정이 었는데, 몇가지 기준을 정했다.
1. 2주안에 혼자서 구현 가능할 것 - 평소 회사 업무도 있고, 이 이상 넘어가면 계속 집중력을 발휘하기 어려웠다.
2. vanilla js로 만들 수 있을 것 - 기본적인 js실력을 늘려야 했고, 가장 좋은게 실제로 만들어 보는거라고 생각 했다.
3. 실제 수요가 있고 사용가능한 것을 만들 것 - 실제 사용자가 쓸 수 있는 의미 있는 것을 만들고 싶었다.
여러 아이디어를 생각하다가 일단 크롬 익스텐션이 눈에 들어왔다. 크롬 브라우저 사용률이 높은 만큼 접근성도 좋고 생각보다 러닝커브가 높지 않았다.
그리고 무엇보다 브라우저의 여러 기능을 활용할 수 있기 때문에 다양한 아이디어가 나올 수 있었다.
크롬 익스텐션에서 여러 아이템을 찾다가 나온게 북마크 기능이었는데, 기존 북마크는 탭의 url을 기준으로 저장된다.
하지만 같은 url의 페이지라도 내용이 길면 거기서 본인이 원하는 부분만 따로 캡쳐해서 저장하고 싶을때가 있지 않은가?
그래서 나온 아이디어는 기존 북마크 + 페이지 캡쳐 + 스크롤 위치 저장 기능을 합친것이고, 내용이 많은 페이지에서 내가 보고 싶은 부분만 다시 볼 수 있게 만들고 싶었다. 이름은 캡쳐마크로 정했다 ㅎㅎ
또한 전체적인 스케쥴 관리부터 제대로 해보고 싶었기 때문에, 개인 jira를 따로 파서 사용 했다.
기존에 혼자서 진행할 때 너무 주먹구구로 진행했던 부분들이 있어서 최대한 체계를 잡아보려고 했다.
회사에서 썻던 칸반보드보다 개인 작업 플래너가 혼자서 하기에 최적화되어서 선택했다.
두번째는 기획 단계이다.
대략적인 프로세스는 이렇다.
1. 사용자가 보던 페이지에서 마우스 우클릭메뉴에서 CaptureMark앱을 누른다.
2. 특정 영역을 드래그앤드롭으로 캡쳐 한다.
3. 캡쳐가 끝나면 북마크를 등록하는 팝업을 띄운다. 거기서 디렉토리 목록과 타이틀 입력폼, 캡쳐한 이미지 미리보기 화면이 보인다.
4. 디렉토리를 선택과 타이틀 입력 후 저장을 누른다. 디렉토리 버튼을 더블클릭하면 디렉토리 이름을 바꿀 수있다.
5. 우측 상단에서 CaptureMark앱을 클릭하면 북마크 선택 팝업이 뜨고, 거기서 디렉토리 목록과 북마크한 아이템 리스트가 보인다.
6. 아이템 선택 시 해당 주소에서 캡쳐했던 스크롤 위치로 이동한다. 아이템을 삭제를 원하면 아이템에 X버튼을 누르면 되고, 여기서도 디렉토리 버튼을 더블클릭하면 디렉토리 이름을 바꿀 수있다.
일단 개발 일정을 위해 백엔드 대신 크롬에서 지원하는 스토리지API 기능을 사용하기로 했다. 창을 끄거나 브라우저 캐시를 지워도 유지가 되기에 원하는 기능 구현을 위해선 충분하다고 생각했다.
디렉토리는 무조건 8개로 고정 시키기로 했는데 플젝 마무리 후 고도화로 디렉토리 관리를 넣을 예정이다.
세번째는 설계 및 디자인 단계이다.
가장 먼저 정한건 앱의 로고였는데, 이부분은 ChatGpt의 도움을 받았다.
아무리 4버전 때라고 해도 CaptureMark앱의 기능에 완전히 딱맞는 로고는 찾기 어려웠고 결국 이걸로 합의 봤다.
화면 설계의 경우 최대한 심플하게 잡아서 리소스를 적게 투입하고 싶었다.
이 프로젝트의 목적이 실제 사용가능한 앱을 만드는 것도 있었지만 vanillaJS의 학습 목표도 있었던 만큼 디자인은 추후 고도화로 빼고자 했다.
그래서 피그마에서 공유되는 모바일 템플릿의 UI를 적극 활용 했다.
- 북마크 선택 팝업
캡쳐된 이미지가 비율에 맞게 가독성있게 들어 갈수 있을지와 페이지네이션에 대한 고민이 필요 할것 같다.
또한 디렉토리를 더블클릭해야 이름을 바꿀 수 있도록 어떻게 사용자에게 정보를 줄지도 확인해 봐야 할것 같다.
- 북마크 등록 팝업
- 폰트 설정
폰트의 경우 무료로 쓸수 있고 무난한 Gmarket 폰트를 적용하기로 했다.
https://corp.gmarket.com/fonts/
다음 편부턴 프로젝트 온보딩, js 모듈과 컴포넌트 구조, 기능 구현에 대해 리뷰할 예정이다.
- 2편 링크
'포트폴리오' 카테고리의 다른 글
| (포트폴리오)CaptureMark 제작기 -2편 (vanillaJS 컴포넌트 구현) (1) | 2024.02.06 |
|---|---|
| (포트폴리오)Sprite Generator - 첫번째, 개요 및 구성 (0) | 2023.10.15 |
