Consola- 스크린 샷 썸네일
(suno로 배경음악도 만들어서 넣었슴닷😆나선형 은하도 움직이게 했슴닷)
소개
클로드 데스크톱 앱 + MCP를 쓰기시작하면서 시각자료를 이전보다 많이 만들게 됐습니다. 그런데 이렇게 만든 시각자료를 한번만 쓰기 아깝기도하고 그렇다고 어디다가 보관해서 관리하기가 애매하더라구요
매번 자료를 만들때마다 html로 받아놓긴 했는데....브라우져로 열어서 관리하기도 귀찮고
이 자료에 메모도 하고싶고...이런 생각이 들어서 그냥 만들었습니다.
기획1일, 바이브코딩 3일, 배포최적화 3일 총 7일 걸렸습니다.
html파일을 업로드하면 그래프 뷰에서(옵시디언 맞음) 파일 간의 관계성과 태그들 현황을 볼수 잏게 했고,
지도를 보여주는 컴퓨터 화면의 스크린 샷
그래프뷰에서 미리 문서의 내용을 볼수도 있고
그것에 많은 점이있는 한국지도
해당 태그와 관련된 문서들도 바로 확인할 수 있게 했습니다.
이름이 다른 한국 도시지도
그외에도 검색기능을 사용하면 해당 노드의 위치와 노트까지 확인할 수 있어요
검은 색 화면에서 한국 앱의 스크린 샷
어두운 화면에서 한국 앱의 스크린 샷
한국 천문학 - 스크린 샷 썸네일
업로드한 클로드로 만든 html 문서뷰어에서는 해당 문서의 노트관리와 문서를 읽으면서 중요하게 생각한 부분에 하이라이트를 추가할 수 있게 했습니다.
한국 웹 사이트의 스크린 샷
진행 방법
CTO 모임에서도 설명드렸던 내용인데, IDE는 커서를 사용했습니다.
이때, 빽빽하게 개발가이드를 주기보다는 제가 필요로하고 생각한 기술과 기능위주로 간략하게 설명했고, UI는 이미지사이트에서 원하는 디자인으로 제시, UX는 최초 기능구현 후 하나하나 짚어가면서 수정했습니다.
- **프론트엔드**
- Next.js 14.1.0
- React 18.2.0
- TypeScript
- TailwindCSS
- Three.js
- D3.js
- Cytoscape.js
- **백엔드**
- Supabase (인증 및 데이터베이스)
- **개발 도구**
- Playwright (E2E 테스팅)
- ESLint
- PostCSS
- TypeScript
결과와 배운 점
프로토타입은 사실 하루만에 나왔는데, 이 프로토타입을 빠른 실패와 경험으로 삼고 부족한 기능들과 부분들을 Manus의 워크플로우처럼 체크리스트형식으로 제시해서 만들게끔 했습니다.
바이브코딩도 빨리 많이 만들어보고 실패해서 다음에 더 나은 기술과 기능을 요구하는것이 중요하다는 걸 느꼈고, 그러기 위해서는 프롬프팅과 동일하게 이 것저것 많이시도해보고 이런 워딩에서 저렇게 액션하는구나를 경험해보는게 중요하겠다는 생각이 들었습니다.
일단 사용자 피드백 받아보고 수익화 방법까지 고민해보려고합니다.(supabase유지비용이라도...)
추가기능으로는 게이미피케이션 요소 추가해서 우주탐험 컨셉으로 전부 교체하고
문서/노트공유기능추가, 워크스페이스 기능(다른사람 우주방문) 등등을 구상하고 있습니다.부디 제가 이 프로젝트를 아름답게 마무리할 수있도록 끈기를 주소서..
남자가 막대기로 하늘로 날고있다
