소개
이전 글에 저는 한 아티클을 보고 메모앱을 만들겠어! 라고 했었지요.
진행하다보니 이런 생각이 들었어요
"고생해서 만들어가지고, 나 혼자 쓴다면 의미없고,
서비스 배포하고 홍보해서 이거 키우자니,
이건 나의 주업이 될 수 없어!"
내 주변 사람들에게 주면, 즉각적으로 자주 쓰임이 있으면 좋겠어!
이러하여 개발 목표가 전환되었습니다.
주변에 커머스 사업가가 많아요.
객단가를 높이기 위한 제품 묶음 구성의 마진 구조를 설계하는 것도
하나의 번거로운 일이라 가볍게 계산기를 만들기로 해요.
많은 AI 선배님들 말씀이 작은 기능 먼저 배포하라.
작은거 먼저 만들어라~ 해서 작은 기능만 생각했는데요???!
이런 작은 기능을 여러개 모아서 하나의 사이트에 넣으려고 하니
폴더 구조 잡는거에서 어려움을 느끼게 되요!
이것이 나의 최종 목표 ↓
진행 방법
1. 기획 – GPT와 함께한 심플한 PRD
이번 기능은 워낙 단순한 구조라서 복잡한 기획서 없이 GPT-4o와 대화로 PRD를 정리했어요. Vooster 같은 툴은 생략하고, GPT와만 소통하며 핵심 흐름만 빠르게 잡았죠.
2. 디자인 – Figma Make vs Readdy 실험
스터디 버디 JIN님의 추천으로, 같은 PRD 문서를 각각 Figma Make와 Readdy에 넣어봤어요. 두 도구의 디자인 결과를 비교해보았어요.
[Readdy]
[Figma make]
똑같은 PRD를 주었는데 결과가 이렇게 달랐어요~
메이크에서 좋았던거는 저 스크롤 바가 움직이고 수치가 실시간으로 계산 반영되는 것이 전체적으로 역동적으로 보여서 반했어요!
요기 코드로 들어가서 전체 코드를 다운 받아서 커서로 데리고 갔어요.
3. CURSOR 수정 및 배포
UI Builder를 이용해 기본 구조를 만들고, 폴더 구조를 다운로드해 CURSOR에서 수작업 수정을 진행했어요. 처음엔 “이거 바로 배포하면 되겠지?” 했는데...
난 이제 다한줄 알았지.. 너무 쉽네 했지..
배포하려면 뭘 설치할 것들이 많더라구요???
리엑스 변환이니 라이브러리 설치니 등등등
시키는 데로 했는데~~~
이 지점에서 생각해보니 이래요
오잉 그럼 나는 기능 폴더를 계속 만들건데
각 폴더마다 라이브러리니, 리엑트변환이나, CSS니가 다 들어있는데
또 껍데기 사이트에도 또 설치해야되잖아??
그럼 이 모든게 한집에 담기면 얘네들 서로 충돌나는거 아니야??
문제 생기면 나는 고칠 줄 모르는데,
어디가서 물어봐야겠어.
다행이 작업을 토요일 밤샘 모각에서 해서 주변에 물어볼 선배님들이 많았아요!
여러 선배가 기능 담을 껍데기부터 만들어보라해서
그 다음 업무는 껍데기 디자인을 할 차례에요!
결과와 배운 점
저의 경우는 '기능 개발 → 즉시 기능 배포'가 아니라,
'사이트 구조 설계 → 기능 삽입' 순서로 가야 한다는 걸 배웠죠.앞으로는 껍데기 구조를 먼저 만들고, 기능은 모듈처럼 순차적으로 넣는 방식으로 진행할 계획입니다.
도움 받은 글 (옵션)
🙏 모각AI에서 만난 선배 개발자분들! 구조 설계의 중요성을 알려주셔서 감사합니다.