소개
뒤로가기를 잘못 눌러서 내용을 다 날려먹고 다시 쓰고 있는 Ming입니다... 하..
저는..하..
저는 1주차에서 '주둥이코딩클럽'이라는 바이브코딩 중심의 정보 제공 플랫폼을 기획했었어요.
이번 2주차는, 1주차 때 진행한 '주코클'의 기획을 더욱 탄탄히하고(디자인 넘어갔어야함) 주요 화면 중 하나를 figma make로 만들어봤습니다.
(1주차 글)
https://www.gpters.org/uiux/post/figma-make-ai-based-r3tWDIse3bAastK
진행 방법
하..진짜..눈물나네요..이걸 다시 쓰려니..하..
1. 서비스의 Why 구체화하기
사용도구:
처음엔 Claude + MCP로 쓰다가, 1단계 마지막 즈음에 서버 불안정으로 계속 안돼서
Google AI Studio로 넘어갔습니다. (확실히 넉넉한 TPU 덕인지 너무 요약되지 않게, 맥락 이해하기 딱 좋게 답변 나와서 아주 나이스)
1주차 때 만든 기획안을 가지고, 디자인을 더 구체화해야지~ 하고 보던 중,
문득 사용자 입장에서의 문제 정의가 부족하다는 생각이 들었어요.
무엇을 할 것이고, 어떻게 만들 것인지는 있지만 이 서비스를 왜 만드냐가 불명확하게 느껴졌습니다.
그래서 대표님 되실 분(ㅋㅋ)을 붙잡고 간이 인터뷰를 진행했습니다.
이 과정에서 가장 근본적인 철학, 탄생 배경을 추가로 서술하며 주코클 서비스만의 why를 명확히 했어요.
기존 기획안과 인터뷰 결과물을 바탕으로, AI에게 'IT 서비스 컨설턴트' 역할을 부여하고 자료를 분석해달라고 요청했습니다. (이유는 딱히 없고, 바이브 프롬프팅한 것)
사실상 AI 분석은 확인하는 용도에 좀 더 가까웠고
대표님 되실 분의 인터뷰에서 얻은 내용에서 '프로젝트(서비스) 진행 배경 및 핵심 철학', '타겟 니즈 명확화', '핵심 차별화 포인트 구체화' 를 도출해냈습니다.
2. 체크리스트 작성을 통한 실행 계획 구체화
1주차 때 만든, 스터디 프로젝트를 열어 2주차에 내가 무엇을 더 해야하는지 점검했습니다.
그리고 진여진 님께서 자주 사용하시는 방식대로, 제가 해야하는 체크리스트를 도출했습니다.
처음 도출된 체크리스트를 보며 피드백도 제공하고 아이디어도 추가로 넣다보니
뭔가 엄청 정리가 안되고 해야할게 많아지더라구요.
체크리스트 뽑아라, 아이디어 이거는 어떻냐, 저떻냐 말하는게 아무래도 청기 들..지말고내리지말고백기내리지말고들어 같은거였나봅니다. 괜히 미안해지네요.
암튼 이렇게 막 말하니 정리를 잘 해주긴 해줬습니다.
3. AISAS 모델을 활용한 유저 시나리오 설계
유저 플로우라고 했지만 당당하게 시나리오를 짰습니다.
시나리오는, 제가 자주 사용하는 AISAS 모델을 활용했습니다.
(뭔가 거창한게 있는게 아니고, 내용이 잘못 나온거라 부끄러워서 가림..)
1단계에 필요한 주요 화면(보라색) 및 흐름은 다음과 같습니다.
3. Figma make 활용한 디자인 작업
하지만 주코클 전체를 구현하기에는 여러모로 점검해야할 것들이 보였습니다 ㅠㅠ..
사례글 작성 일정에 맞춰 축소하자니 나중에 일이 커져서 눈사태가 될 것 같아요.
그래서 지금 당장 할 수 있는 것이자 핵심 기능 중 하나인 '진단 테스트'로 노선을 틀었습니다.
테스트를 진행하는 동안 사용자가 자신이 궁극적으로 원하는게 무엇인지 이끌어낼 수 있도록, 몰입할 수 있었으면 했습니다.
그래서 '몰입'을 키워드로 디자인 컨셉을 가져가면 어떨지 생각했고, 마인드맵을 통해 컨셉 키워드를 도출했습니다.
간만에 하니 생각이 잘 떠오르지 않아, AI에게 유도 질문을 요청했습니다. 질문에 관한 답변을 다 모아서 디자인 컨셉을 도출, Figma make에 입력했습니다.
프롬프트가 길다보니 창 3개를 열어 테스트를 했습니다.
1. 들어갈 내용 먼저 입력 → 디자인 가이드 입력
2. 들어갈 내용 + 디자인 가이드 함께 입력
3. 들어갈 내용 + 디자인 가이드 + 이미지 함께 입력
확률 싸움이긴 하다만, 디자인가이드까지 함께 입력한게 그나마 개인적으로 마음에 듭니다.
(차례대로 1 → 2 → 3 입니다. 다들 고만고만해서 어떤 아이를 붙잡고 가져갈지 고민이네요..! 그냥 새로팔까..!)
음악도 재생되게 하고 싶은데, 이거는 방법을 좀 찾아보고 있습니다. 되면 좋겠네요ㅠ
기획에 너무 많은 시간을 써버려 과제 진도가 좀 늦네요..ㅠㅠ
디테일한 디자인 조정 외에도 질문 문항 수정, 답변 분석 로직 기획 등등이 남아있네요.
오늘 스터디 시간 전까지 디자인은 좀 더 다듬을 것 같습니당.
개인적으로는 해당 기능을 빨리 완료하고 싶지만 그 외 화면들의 와꾸도 빨리 잡아봐야할 것 같아서 다음주는 이 부분 디자인이 더 나올 것 같습니다.
마지막 일주일 빡시게 달려봐야겠습니다. ㅠ-ㅠ
결과와 배운 점
어쨌든 '문제 정의' 과정을 통해 WHY를 수립한 것이 좋았습니다. 이를 어떻게 프로세스화 할지 고민하고 체계화할 필요가 있을 것 같아요.
기능 중심적 사고가 아닌, 사용자 중심적 사고가 중요함을 다시 깨달음!
어느샌가 서비스를 설계할 때, 메뉴 구조나 페이지 레이아웃 먼저 정하는 나쁜 버릇이 들었는데, 이번 기회를 통해 다시금 사용자를 중심으로 주요 화면 및 기능을 설계하는 중요성을 깨달아서 개인적으로 기쁩니다.
다음 계획
레퍼런스도 확인하며, 디자인 구체화하기
화면 단위로, 그리고 섹션 단위로 하나씩 잡아서 묵묵히 처리하기
3주차 Replit 구현을 위한 기술적 준비 (CMS 연동 등) -> 가능할지.. 😂