figma make 및 ai 기반으로 나만의 서비스 만들기 4주 프로젝트 기획 - 1주차

소개

만화 캐릭터가 드레서 앞에 서 있습니다.

많은 분들이 그러시겠지만, 마음 속 아이디어 상자에 아이디어가 1개만 있지는 않은데요.
어떤걸 선택해야할지 너무 고민이 많았습니다.

그러던 중 진여진 님의 글에서 어떠한 우주적(?) 영감을 받아 AI를 활용해 이거부터 정하자는 생각에 닿았습니다.

이 자리를 빌어 감사를 드립니다. 🙏 🙏

https://www.gpters.org/uiux/post/idea-pivot-3-times-EUlLyNq5w6vAlI0

진행 방법

1단계: 프로젝트 선택하기

  • 개인 프로젝트 'PT 코칭 서비스'

  • 사이드 프로젝트 '주둥이코딩클럽 - 바이브코딩 관련 사이트'

위 두 프로젝트 중에서 이번 4주 과정을 함께 할(?) 프로젝트를 선별하는 과정을 거쳤습니다.
(1주차 숙제를 결국 해버리게 된..😂)

아래 첨부 이미지처럼 클로드에 프로젝트를 생성한 후, 각 프로젝트에 관한 정보를 입력했습니다.

제공한 정보가 아직 구체화되지 않은 부분이 많았기도 하고, 정리되지 않은 내용으로 넣었다보니
분석 정보가 엄청 정확하지는 않았는데요.

그럼에도 불구하고 해당 내용을 읽으며 어느정도 머릿속에서 정리가 돼서

'해야하는 일' 인 '주둥이코딩클럽' 사이트 제작을 하기로 선정했습니다.

2단계: 프로젝트 진행 계획 구체화

프로젝트를 진행하다보면 어느 단계에서 세부적으로 빠져서.. 진도를 빼는게 힘든 사태가 발생하는데요.
특히 제가요.

그래서 이번엔 4주 과정 동안 어느정도 고삐가 될 가이드를 얻었습니다.

<입력>

주둥이 코딩 클럽(이하 '주코클')으로 진행할 경우, 주차별 어떤 산출물이 나와야할지 정해야할 것 같아. 
너무 난이도가 높지 않되, 주코클 로드맵 1단계를 달성하기 위한 최소한의 산출물이 필요해. 이를 위한 역질문 해줘. (질문 리스트를 만든 후, 우선순위를 산정해서 2개씩만 질문 제시해줘)

<출력>

아래와 같이 출력된 내용에 관해 피드백 & 답변을 제공하며 몇 번 티키타카 합니다.

이 과정에서 프로젝트 구체화도 할 수 있었고, 각 주차별 산출물 제안을 받았습니다.

한국어로 된 한국어 목록

DB를 어떻게 가져갈지 고민이긴 한데, 이건 2주 뒤의 Ming이 어떻게든 해결 할 것 같으니 넘어가겠습니다.

다음 요청을 통해 1주차에서 어떤게 미흡했는지 점검도 받아봅니다.

<입력>

1주차 커리큘럼 기준으로 이제 내가 뭘 해야하지? 개발 목표 설정은 충분한지 평가하고 피드백해줘

<출력>

큰일입니다.

프로젝트 고민하느라 기획 부분이 너무 빠졌네요.

클로드가 제안해준 내용이 아주 좋은데요, 시간이 없습니다.
스터디장이신 Diane 님께서 제작해주신 GPTs로 달려갑니다. 다이엔님~!

https://chatgpt.com/g/g-6863abe6e74c81918f2e63617e7d1a09-ux-ui-builder

3단계: UX/UI 구현 요구사항 구체화

한국어 문자 메시지의 스크린 샷
지침 목록이있는 한국어 페이지

아무래도 콘텐츠가 메인인 사이트다보니, 콘텐츠 없이 핵심 기능에 관한 가락 잡는게 쉽지 않네요.

그래서 우선 키스크린 제작으로 넘어갔습니다.

4단계: 키스크린 제작

참고 스타일 이미지를 넣은 것과 넣지 않은 것으로 2가지를 만들었는데요.

UI 상으로는 큰 차이가 없긴 했습니다.

콘텐츠는 더미 데이터로 만들어서 넣어달라했습니다.

주코클의 1단계는 콘텐츠는 지식 전달형, 튜토리얼형 이렇게 2가지로 제공되는데, 1차 시도에서는 상세 페이지가 전부 튜토리얼형으로 나와서 이 부분에 관한 수정 요청을 했습니다.

차이가.. 있다면 있긴 한데, 실질적으로 콘텐츠를 작성해야할 때 충분히 감당(?)할 수 있는 레이아웃인지 검증이 필요한 것 같습니다.

결과와 배운 점

주코클로 프로젝트 방향성을 이제 막 잡았다보니 주요 스크린을 만드는 과정에 빈 내용이 많은 것 같습니다.

다음주까지는 프로젝트 수주해주신 대표님과 상의해서 주요 콘텐츠 초안을 제작하고 아래 내용을 진행하려 합니다.

  • 구체적인 사이트 구조 선정

  • 핵심 페이지 디자인 완료 - 랜딩페이지, 콘텐츠 페이지 (사용자 경험 세부 설계 포함)

    • 레퍼런스 디자인 확인

부지런히 해야겠군요 🥹

갑자기 생각난 팁, figma make에서 데이터를 따로 관리할테니 파일만 만들어줘~ 하면 따로 만들어줍니다.

제목을 뭐라 써야할지 너무 고민이네요 😂

3
2개의 답글

👉 이 게시글도 읽어보세요