AI를 활용한 1인 개발하기 2(골스페이스 MVP 제작기)

안녕하세요. 1인 개발 캠프 참여자 성구입니다.

지난 게시글에 이어서 오늘은 개인 목표 관리 플랫폼 MVP 개발기를 들고왔습니다.

사용한 서비스

• GPT

• 클로드

• 피그마

• 슬래시페이지

목차

• 지난 주 되돌아보기

• 이번 주 목표

• MVP 기능 개발 완료

• 서비스명 확정

• 로고 제작

• 랜딩페이지 제작

• 사용가이드 제작

• 인사이트 요약

• 회고

• 앞으로의 계획

🔙 지난 주 되돌아보기

지난 주에는 아이데이션을 시작으로 기획, 디자인을 완료하고 개발을 시작했습니다.

✅ 아이데이션 완료

✅ 기획 완료

✅ 디자인 완료

🚀 개발 진행중

🔽 지난 주 발표 자료 🔽

⏩ 이번 주 목표

이번 주에는 MVP 기능 개발을 완료하고 서비스 런칭을 하는 것이었습니다.

자, 지금부터 현재까지의 진행 상황과 AI를 활용해 레버리지한 것들을 공유드리겠습니다.

✅ MVP 기능 개발 완료

개인 목표 관리 서비스의 MVP 기능은 목표 → 계획 → 할일을 하나의 프로세스로 관리하는 것입니다. 목표를 생성하고, 목표에 따른 세부 프로젝트를 생성하고, 프로젝트를 완료하기위한 할 일을 관리할 수 있는 기능입니다. 현재 MVP 기능 개발과 구글 로그인 연동을 완료하여 목표로 했던 MVP 기능 개발을 완료했습니다.

MVP 기능 시연(20초)

골스페이스 시연 영.mp4

🚫 개발은 완료했지만 아직 할 일이 많다…

우선, 기능 개발은 완료했으니 뿌듯한 마음으로 잠깐 쉬어주고, 해야할 일을 리스트업 했습니다.

1. 서비스명 확정

2. 로고 제작

3. 랜딩페이지 제작

4. 사용가이드 작성

5. 배포

👏 서비스명 확정! 골스페이스(Goalspace)

처음에는 GPT(Goals, Projects, Tasks의 첫 글자)라는 가명으로 시작했습니다. 서비스 런칭을 위해서는 정식 서비스명을 확정하기로 했습니다. 제 마음대로 정해도되지만 있서빌리티를 위해 GPT, 클로드, 저까지 3명에서 브레인스토밍을 시작했습니다.

GPT 질문 답변

클로드 질문 답변

개인적으로 클로드가 더 다양하고 친절한 답변을 해줬다고 느꼈습니다. 한 번의 질문으로 끝난 것이 아닌 2~3일간 심심할 때마다 물어봤습니다. 최종적으로 개인 목표 관리를 위한 공간이라는 의미로 목표(Goal) + 공간(Space) = 골스페이스가 되었습니다.

( + ) 보너스

지금 생각해보니 ‘너는 웹 서비스 브랜드 전문가야’라는 역할 부여를 했으면 더 좋은 결과를 얻을 수 있지 않을까 싶습니다. 서비스명은 확정했지만 역할 부여를 하고 다시 물어봤습니다.

조금은 더 나은 답변을 해줬다고 느꼈습니다.

💡 서비스명 정하기위한 프롬프트 3단계

1. 역할 부여: “너는 웹 서비스 브랜딩 전문가야.”

2. 서비스 소개: “나는 개인 목표 관리 서비스를 만들고있어. 개인 목표 관리 서비스는 목표 → 계획 할일을 하나의 프로세스로 관리하고 데일리 노트를 작성할 수 있는 서비스야.”

3. 액션: “서비스명 추천해줘.”

🎨 로고 제작

다음으로 로고를 제작해야 했습니다. 무작정 서비스명을 GPT와 클로드에게 던져주고 로그를 만들어달라고 했습니다. 개인적으로 심플한 디자인을 좋아해서 최대한 간단하게 만들어달라고 했습니다.

GPT 질문 답변 예시

이런식으로 몇 번의 요청을 반복하다 마음에 드는 디자인을 svg 코드로 만들어 달라고 했습니다. svg 코드로 짜달라고하면 장점은 피그마에 코드 붙여넣기가 가능하다는 것입니다!

생성해준 디자인을 기반으로 피그마에서 디테일을 수정하여 최종적으로 로고를 확정했습니다.

최종 로고 디자인

( + ) 24.07.06 추가

로고 제작시에도 역할 부여를 해주고 시작하면 좋을 것 같습니다.

💡 로고 제작 4단계

1. 역할 부여: “너는 로고 제작 전문가야”

2. 서비스 소개: 내 서비스를 소개(앞에 했다면 생략)

3. 액션: “로고 제작해줘. SVG 코드로 만들어줘.”

4. 디자인 디테일 수정: 피그마와 같은 디자인 툴로 디자인 디테일을 수정합니다.

🕸️ 랜딩페이지 제작

자, 이제 랜딩페이지를 제작할 차례입니다. 랜딩페이지 제작도 동일한 과정으로 진행했습니다.

💡 랜딩페이지 제작 4단계

1. 역할 부여: “너는 웹 서비스 랜딩페이지 제작 전문가야”

2. 서비스 소개: 내 서비스 소개

3. 액션: “랜딩페이지 제작해줘.”, “반응형으로 해줘” 등

4. 디자인 디테일 수정: 저는 코드에서 바로 수정했습니다.

🔽 골스페이스 랜딩페이지 제작 상세 과정을 블로그에 작성했습니다 🔽

🦮 사용가이드 작성

사용가이드 작성은 선택이지만 한 번 작성해보기로 했습니다. 어디에 작성할까 고민하다 슬래시페이지를 활용하기로 했습니다. 항상 글을 쓰는 것은 귀찮기에 클로드에게 초안 작성을 요청했습니다. 이 과정도 다른 과정들과 비슷합니다. 초안 작성을 완료한 후 슬래시페이지에 내용을 업데이트했습니다.

💡 사용가이드 작성 4단계

1. 역할 부여: “너는 사용자 가이드를 작성하는 전문가야.”

2. 서비스 소개: 내 서비스 소개

3. 액션: “사용자 가이드 수정해줘.”

4. 내용 수정: 내용 수정

🔽 슬래시페이지에 업데이트한 사용가이드 🔽

🚀 배포 하기

이 외에도 기타 할 일들이 많았지만 다 완료하고 배포를 했습니다. 여기까지 골스페이스 MVP 제작기 입니다.

🔽 골스페이스 사용해보기 🔽

💡 인사이트 요약

• GPT와 클로드를 활용하여 서비스명 선정, 로고 제작, 랜딩페이지 제작, 사용자 가이드 작성 등 다양한 작업을 빠르게 진행할 수 있었습니다.

• AI와의 상호작용 시 1) 역할 부여, 2) 서비스 소개, 3) 구체적인 액션 요청 등 체계적인 프롬프트 구조를 사용하여 더 나은 결과를 얻을 수 있었습니다.

• AI의 초기 결과물을 바탕으로 직접 수정하여 효율적으로 최종 결과물을 얻을 수 있습니다.

🔙 회고 & 성과

• AI 1인 개발 캠프 참여로 1인 개발에 대한 인사이트와 ‘일단 해보자’라는 동기부여를 얻었습니다.

• 그로인해 서비스 0개에서 서비스 1개가 되었습니다.

• 이 경험을 바탕으로 프로세스화하여 다음 프로젝트는 더 빠르게 진행할 수 있을 것 같습니다.

✈️ 앞으로의 계획

• 골스페이스 고도화

• 다음 프로젝트 준비중

• 1인 개발을 위한 정보 & 인사이트 공유

🔽 저의 여정이 궁금하시다면 가끔 들러주세요 ㅎㅎ 🔽

#11기1인개발