소개
지난주에 진행한 진단 사이트를 디밸롭했습니다.
https://www.gpters.org/uiux/post/week-2-figma-make-IKsyHqPjCNm54PZ
진행 방법
1. 진단 테스트 프로세스 정의
랜딩 페이지 CTA 선택 → 진단 페이지 스크린 (타겟이 갖고 있는 painpoint, needs에 관해 공감을 불러일으킬 수 있는 문구 상시 노출) → 진단 시작 버튼 클릭 → 테스트 몰입 프로세스 진행 (1분 미만) → 핵심 질문 문항 수행 → 결과화면
2. 진단 페이지 진입 시 노출되는 문구 선정
해당 문구의 목적:
공감을 불러일으켜 진단 테스트를 하고싶은 마음이 들게 함
서비스가 제공, 해결할 수 있는 문제에 관해 간접적으로 제시하는 용도
문구 후보
AI 도구들이 많다던데, 뭘 써야 효과적일까?
AI로 업무를 자동화하고 싶은데 어디서부터 시작해야할까?
개발 지식이 없는데도 만들 수 있을까?
여기까지 정리한 후, Claude 이용해서 문구 고도화를 진행했습니다.
문구를 한 10개 추천해줬습니다. 문구는 나쁘지 않고, 선택장애가 있는 제가 나쁩니다.
내 단점은 AI가 보완해줘야지.
자연스럽게 AI한테 일을 떠넘기면 알아서 기준을 세워서 결과물을 가져다 줍니다.
문구가 썩 맘에 들지는 않지만, 이건 나중에 수정할 수 있으니 넘어갑니다.
3. 진단 테스트 몰입 문구 선정
'몰입'이라는 키워드를 선정했을 때부터 생각했었던 것은 명상이었습니다.
명상의 원리를 '문제 정의의 질을 높이는 수단'으로 활용할 것입니다.
명상을 통해 겉으로 생각하는 표층 이슈 대신, 내면의 진짜 문제를 빠르게 도출하도록 하는거죠.
명상을 시작할 때, 몰입을 위해 진행하는 과정 및 텍스트를 정리해줘. 누군가가 해결하고자하는 문제를 가져오면 그에 알맞는 툴을 추천하고 단계별 활용방법을 추천해줘야하는데 이 때, 그들이 가진 내면의 진실된 문제를 가져오기 위해 이 수단을 활용하려고 하는거야. 내 요청의 배경과 의도, 맥락을 먼저 분석하고 나에게 보여줘. 그런 다음 요청을 수행해
ChatGPT에 막 입력합니다. ChatGPT를 사용한 이유는, 놀고 있는 AI가 이거 뿐이어서..
아무튼 ChatGPT 활용해서 몰입 과정에 사용할 문구도 작성합니다.
레퍼런스 탐색
드디어 디자인과 관련된 작업을 시작합니다 (ㅠㅠ)
명확한 그림보다는 다양한 레퍼를 보며 영감을 얻고 그걸 바탕으로 구체화하고자 했기에 Awwwards, Pinterest 그 외 여기저기 알고 있던 사이트 등등을 기웃거리며 전체적인 스타일 레퍼런스를 찾았습니다.
개인적으로 레퍼런스를 찾는 과정에서 각 화면이 어떤 식으로 보여질지 상상하고 구체화할 수 있었습니다.
일단 주코클의 전체적인 스타일이 확정은 아니지만 '너무 무겁지 않고 가볍게, 모두가 쉽게 찾아올 수 있는' 것이기에 이 맥락에서 크게 벗어나지 않는 스타일로 고려했습니다.
진단 테스트 과정은 '차분함'이 필요한데, 메인 사이트 (주코클)이 가져갈 분위기와 충돌하는 상황이 발생해서 조금 당황하긴 했지만, 컬러 하나를 가지고 가서 그걸 점진적으로 낮추는 방향으로 유도하기로 결정 (효과가 있을지는 결과를 보면 알겠지..!)
저는 퍼런색을 좋아하니 파란색으로 가겠습니다. (파랑과 옐로우 조합을 좋아한다는 TMI)
원하는 인터렉션 스타일도 발견했습니다.
보다 정확한 프롬프팅을 지시하기 위해 영상으로 캡쳐 → google ai studio에서 확인 과정을 거치고 정확한 프롬프트를 추출했습니다.
유튜브를 보유한 구글답게, 제미나이는 영상을 사람이 보듯이 볼 수 있습니다.
이런 용도로 활용하기 좋으니 참고하시면 좋겠습니다.
5. 화면별 구성요소 작성
화면 단위로, 핵심적으로 들어가야할 주요 구성 요소를 정리했습니다.
디자인 컨셉 업데이트
진단 테스트의 기획이 지난주보다 구체화되었고, 레퍼런스를 탐색하며 제가 원하는 그림도 분명해졌습니다.
이를 반영할 필요가 있어 업데이트를 진행했습니다.
잠시 짬을 내서, 해당 디자인 컨셉이 figma make 에 기본 내장된 디자인 가이드라인과 충돌이 없는지 점검도 했습니다.
없다고 합니다.
7. 화면 제작
화면 구성요소와 앞에서 업데이트한 디자인 컨셉을 figma make에 넣습니다.
생성형 AI는 말 그대로 생성하는 것이기에, 결과물은 뽑기라 생각합니다. 그래서 일단 지난번과 마찬가지로 3개를 돌려놓고 기다림의 시간을 가집니다. 6시까지 글을 올리려했는데, 지금이 6시30분이네..큰일났다..이런 생각도 하다보면 완성이 됩니다.
3개 중 '그나마' 가장 맘에드는 녀석을 고릅니다.
진짜 하나도 손안댄 순수 바닐라 1트 결과물.
요렇게 정리를 하다가..
갑자기 아이디어가 떠오름 + 근데 디자인 리소스 찾아서 전달하기 귀찮아 '가능성만 보자' 싶은 느낌으로 시도해봤는데요. 코드로 한땀한땀 그려준 정성이 갸륵하나, 직접 디자인 해야겠다는 마음으로 굳혀졌습니다.
그리고, 주코클 사이트에 반영할 디자인 스타일 레퍼런스 이미지 & 색상적 특징을 반영해서
gui 모음집을 만들어보았는데요.
제가 생각한건 컴포넌트들이 일정 사이즈로 나와서 3x3으로 나오는거였는데 프롬프트를 너무 대충 준 것 같습니다.
이 이미지를 활용해 figma make에 다음과 같이 입력했습니다.
결과물입니다.
모바일 버전에서는 텍스트를 가리는 문제가 있어 조정을 좀 해야합니다.
gui도 실제 png를 제공한다면 퀄리티가 더 업그레이드 될 것 같습니다.
figma로 직접 디자인해서 가져와야하나 고민하던 찰나에 영감을 주는 결과물이 나와 기분이 좋았습니다.
figma make에서 나온 결과물이 디자인 파일과 왔 다갔다하며 수정할 수 있다면 정말..너무 좋을 것 같아요.
기대한다 figma..
결과와 배운 점
벌써 4주가 지났다는게, 매번 믿기지가 않네요.
Figma make로 더욱 다양한걸 시도하고 도전해보고 싶었는데 그 부분은 많이 해보지 못해 아쉽습니다.
개인적인 원인 분석을 해보자면, 어떠한 기능을 테스트해본다던가 어떤 디자인을 구현하는 명확한 테스크가 있던게 아니라 기존에 구상하던 서비스를 구현하려했던게 문제가 아니었나 생각합니다.
많은 영감과 지식을 공유해주신 다이엔님, 여진님 그리고 스터디원 분들께 깊은 감사를 드립니다.