소개
< 대만 사람들을 위한 서울 맛집 투어 웹 만들기 >
이번 14기 스타트업 실험실에서 벨라님을 주축으로 능력자 분들과 팀원이 되었는데요.
저는 개발자가 아님으로... ;;
초기 회의를 진행하면서 느꼈던 점을 토대로 제가 할 수 있는 것이 무엇일까 고민을 하는 시간을 가졌습니다.
일단은 시안을 작성한다는 생각으로 기본적인 회의 내용을 토대로 웹사이트의 디자인은 어떻게 접근하면 좋을까라는 생각을 하였습니다.
다행히 요즘 웹디자인을 위한 다양한 AI툴들이 있어서 접근을 해봅니다. (연습 연습!!!)
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
https://chatgpt.com/
https://www.usegalileo.ai/explore
https://www.figma.com/ko-kr/ai/
프로젝트의 개요를 챗 지피티에게 설명 후 고객 여정과 웹 디자인을 하기 위한 빌드 업을 해놓습니다.
챗 지피티 ->
사업의 목적과 목표를 설정한 후 설문지를 작성해보고 문제점 보완,
가상 고객의 페르소나를 만들고 고객 여정지도를 제안 받아봅니다.
이제 이 내용을 바탕으로 지피티에게 UX UI 전문가가 되어 달라고 합니다.가장 먼저 제일 중요한 페르소나를 설정해 달라고 했는데,
프로토 페르소나는 사용자에 대한 연구를 수행할 수 있는 리소스가 없을 때 검증 없이 가정으로 설정하는 페르소나입니이죠.
원래 페르소나 사용자 데이터를 기반으로 설정해야 하지만, 지금 여기에 리소스를 투입할 게 아니기 때문에 프로토 페르소나로 설정합니다.한국어 단어가 적힌 종이 한 장
한국어 텍스트가 있는 한국어 웹사이트
-> 이러한 방식으로 예시를 받아봅니다.
하지만 메인 페이지나 상세 페이지의 내용이 맘에 들지 않습니다.
다시 제안해봅니다.한국어로 된 문자 메시지의 스크린샷
해서 다시 여러 번의 시도 끝에 대충은 얼추 맞게 프롬프트가 나오는 것 같습니다.
핵심 페이지 3개에 해당하는 UI 생성 프롬프트를 받아 봅니다.
다음 '갈릴레오 AI'로 고고!
(여러 AI가 있었지만 갈릴레오를 선택한 이유는 가장 간편해 보였기 때문.
만들면서 피그마와 바로 연동 가능!!)
원래는 19불을 구독하라고 하지만 그냥 패쓰하고 사용하기 갑니다
(기본 150 토큰을 줍니다. 해서 신중하게 만들어 봐야 한다는 것;; 기본 웹페이지 3개 만드니까
30토큰이 사라졌습니다. 한 페이지당 10토큰인가봐여)
밑에 보시면 갈릴레오가 다시 확인하면서 이게 맞나고 물어보죠. 걍 YES하시지 마시고 잘 읽어보시길)
많은 텍스트가 포함된 웹사이트의 스크린샷
이제 각 페이지를 자세히 봅니다. 음 ...
지도와 스트리트 뷰가 포함된 웹페이지의 스크린샷
수정을 해봅니다, 각 이미지별 에디트 기능을 들어갑니다. 한글 프로프트로도 되나 볼까요?
응 은근히 구현이 잘 됩니다.
레스토랑 웹사이트의 홈페이지
이제 피그마로 갑니다.
메뉴가 있는 페이지의 스크린샷
피그마에서 편집이 가능합니다. 사진 및, 텍스트 등등
결과와 배운 점
아직은 조율하고 맞춰가야 하는 부분이 있어서 확정된 무드나 워크플로우는 아니지만
어떠한 방식으로 접근해 보면 좋을지 써보면서 머릿속이 정리 되는 느낌이였습니다..
우리팀 화이팅입니다. !!!!
스타트업 실험실 고고!!!!
참고
그 밖에 웹/앱 디자인 AI툴 소개:
-'Framer' : 간단한 웹 랜딩 페이지 디자인에 적합함
디자인한 결과물은 아직까지 다소 단조로운 편임.
'프레이머'는 노코드 웹빌더 툴로 더 매력적.
- 'Uizard' : 오토 디자이너라는 기능으로 웹과 앱 디자인을 생성할 수 있는데,
프롬프트를 입력하면 한 번에 여러 페이지를 만들어 줘서,
디자인의 전체적인 톤과 무드나 플로우를 확인하기에 좋음.
그리고 각 페이지끼리 플로우를 연결해서 간단한 프로토타입을 제작할 수 있음
따로 피그마에서 수정 가능.
- 'Relume' : 웹사이트의 하이어라키 AI 알아서 설계해 주고,
하이어라키 맞춰서 각 페이지에 해당하는 Hi-fi 와이어프레임,
즉 뼈대를 디자인해줌, 마치 저장되어 있는 라이브러리에서 UI 컴포넌트를 가져오는 것처럼 디자인이 생성됨.
- 'Dora' : 프레이머처럼 웹사이트 빌더에 가깝는데, 아직 베타 테스트서 그런지
완성도에서 크게 떨어지는 면이 있다고 함.
