소개
시도하고자 했던 것과 그 이유를 알려주세요.
플러그인 판매 웹사이트를 만들 생각이었으나 플러그인 하나의 기획 자체가 너무 무거워서 다른 사이트를 기획해보았습니다. 요즘 해야 할 일을 하는 것에 어려움을 느꼈기 때문에 게임의 요소를 접목시켜 투두 리스트 달성의 효과성을 높이기 위한 서비스를 구상했습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.
Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.
Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)
마구잡이로 기획한 내용을 IPO 템플릿을 통해 정리했습니다.
복사본/1_IPO-Webpage-Plan-Templete.md 해당 템플릿에 맞게, 내 nexus 아이디어를 PM의 관점에서 정리해줘.
세션 초기화됨
세션 초기화됨
2개 파일 읽음
2개 파일 읽음
나머지 파일들도 확인할게요.
3개 파일 읽음
3개 파일 읽음
이제 모든 자료를 파악했습니다. NEXUS 아이디어를 I-P-O 템플릿에 맞게 작성할게요.
파일 생성됨
파일 생성됨
완성했습니다. /Users/ihwilang/Downloads/NEXUS 복사본/1_IPO-Webpage-Plan_NEXUS.md 에 저장됐어요.
PM 관점에서 작성하면서 특히 신경 쓴 부분:
I (Input)
타겟을 3가지 페르소나(코어·갓생러·게임 유저 타입)로 구체화했습니다
"이전에는 X, 이제는 Y" 구조로 가치 제안을 명확히 정리했습니다
아직 없는 콘텐츠(후기, 가격 등)는 [ ] 미완으로 솔직하게 표시했습니다
P (Process)
Phase 0 목표에 맞게 랜딩 페이지 단일 페이지 IA로 집중했습니다
1~4주차 작업 순서를 Figma → 랜딩 → 영상 → 배포 순서로 현실적으로 설계했습니다
O (Output)
4개 기능 명세를 "사용자가 버튼 누르면 무슨 일이 일어나는가" 단계별로 작성했습니다
질문 리스트에 실제로 결정이 필요한 3가지 포인트를 정리했습니다 (세계관 이름 분리, 목업 설득력, 베타 기준)
음 이거 웹으로 출시해서 제일 주된 컨셉은 그냥 투두리스트를 웹으로 접속해서 관리하는 거고, 거기에 애니메이션, 이펙트, 해금되는 아이템이나 칭호 같은 요소가 더해져서 소소한 재미 주는 걸로 바꿔. 그리고 구글 ai스튜디오로 개발할 거
파일 생성됨
파일 생성됨
수정했어요.
바뀐 핵심:
웹앱으로 명확히 정의 (브라우저 접속, 앱 설치 불필요)
주된 컨셉은 투두 관리, 게임 요소는 "소소한 재미" 포지션으로 후순위
칭호·아이템 해금 시스템 추가 (조건 달성 시 잠금 해제)
완료 이펙트 애니메이션 명시 (파티클, 빛 번짐 등)
개발 도구 Google AI Studio로 교체
필요한 페이지는
메인 대시보드(내 캐릭터 보이고 투두 리스트도 보임) 페이지
-> 대시보드에서 버튼 누르면 나오는 투두리스트 등록 및 페이지(증거 사진을 첨부해야 함)
-> 마찬 가지로 버튼 누르면 나오는 칭호 및 아이템 커스터마이징 페이지(도감 형식으로)
이 정도 같은데 필요한 부분 더 디벨롭하고 정교화해봐
파일 생성됨
파일 생성됨
업데이트했어요. 주요 추가/정교화 내용:
추가한 페이지
온보딩 (첫 접속 1회) — 로그인 + 닉네임 + 기본 캐릭터 선택. 없으면 대시보드가 허전함
디벨롭한 내용
대시보드 레이아웃을 좌(캐릭터) / 우(투두 목록) 분할 구조로 명시
투두 완료 흐름을 등록 폼(2-A)과 완료 처리(2-B)로 분리 — 증거 사진 없으면 완료 불가로 설계
도감 페이지 — 획득/미획득 모두 보여주는 구조 + 미획득은 조건 텍스트 노출 (도전 욕구 자극) + 장착 미리보기
핵심 차별점으로 올린 것
증거 사진 첨부 = 셀프 체크 방지. 단순 투두 앱과 구분되는 포인트라 명시적으로 강조했음결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
자연어로 편하게 개발하면 되는 줄 알았는데, 제 자신이 기획을 명확하게 인지하지 못하는 상태라면 제가 해당 프로젝트를 핸들링 하는 게 아니라 매달려 가는 거구나 느꼈습니다. AI와 아이데이션 후 내 언어로 정리하고, 그 이후에 또 그 정리한 문서를 가지고 AI와 아이데이션. 이런 식으로 좀 여러 단계로 분리해야 그나마 핸들링이 가능한 것 같습니다.
과정 중에 어떤 시행착오를 겪었나요?
애니메이션을 구현하고 싶어서 계속 찾아봤는데 이건 또 무슨 에셋화 라는 개념이 필요해서 더 찾아봐야 할 것 같습니다. 애니메이션을 통으로 구현해달라고 했는데 이건 무리였나봅니다...
도움이 필요한 부분이 있나요?
웹사이트 디자인을 제가 무슨 느낌으로 하고 싶은지도 솔직히 규명하기가 너무 어렵고 그걸 또 AI가 알아들을 수 있는 명칭이나 언어로 설명하는 것도 어려운 것 같습니다... 그리고 기능도 대략의 기능이 생각이 나는데 그 정도의 상태만 AI에 입력하면 제가 생각하는 것과 너무 달라지고, 그렇다고 제가 더 디벨롭해서 문서화하기는 퀄이 떨어지는 것 같습니다... 진짜 작동가능한 상태로 만드는 노하우를 더 알고 싶습니다...
앞으로의 계획이 있다면 들려주세요.
웹사이트의 디자인이 아쉽습니다.. 다른 디자인 관련 도구들을 탐색하여 직접 그림을 그려서라도 원하는 바를 제대로 구현하고 싶습니다.
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
https://www.gpters.org/uiux/post/googles-ai-design-tool-EnBSMjcjfns3os4
