소개
아기다리 고기다리던 figma make 베타버전을 드디어 저도 써볼 수 있게 되었습니다!!
현재 Full sheet 요금제 구독자 대상으로 순차적으로 기능을 오픈하고 있습니다.
저는 이틀정도 걸렸던 것 같아요
figma make에서 가능한 작업을 큼지막하게 분류해보았습니다.
진한 파란색으로 표시된 것들이 제 기준 차별화된 기능이 아닐까 생각하는데
그 외에는 기존의 러버블이나 레플릿 등등의 서비스가 제공하는 것에서 엄청 큰 차이는 없는 것 같아요.
물론 아직 기존 Figma 디자인 파일을 제대로 활용하지 못해서 하는 말이겠죠!
여러차례 시도하다가 엄청 헤매서 맥북을 수차례 덮어버렸거든요. ㅋㅋ
뒤늦게 figma make Doc를 뒤져서 방법을 찾아냈습니다..(사용성이 이래도 되는건지..내가 바보인건지..바보같은 나도 쉽게 사용할 수 있도록 해줘야하는게 아닌지..)
사용 도구
Figma make
진행 과정
다이엔님께서 분석하신 Google Stitch 샘플 예제 흐름을 따라갔습니다.
뼈대 만들기 → 스타일 입히기 → 콘텐츠/기능 수정 → 세부 요소 다듬기
https://www.gpters.org/uiux/post/google-stitch-ui-implementation-kBVD2ShCff4OYDO
1. 뼈대 만들기 (목표 및 페이지 정의)
무엇을 만들고 싶은지, 그것은 어떤 화면과 기능이 있는지 간단하게 입력합니다.
진행하고 있는 UX 심리학에 관한 웹페이지를 만들고 싶어.
주요 화면 및 기능은 다음과 같아.
- Home
- Study: 스터디 자체에 관한 화면 모음
- Article
- Exploration Board
- Topic Archiving
- 운영
- 회의록
- 템플릿 모음
- Inbox
Study와 '운영'은 메뉴명이야.
| 화면 | 기능 및 콘텐츠 |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| Home | - 스터디 규칙 및 원칙 (강한 워딩 X, 방향성을 공유하고 스터디원의 이해도를 맞추는 것이 목적)<br>- 팀 구성원<br>- 메뉴 바로가기<br>- Ongoing tasks list (현재 진행 중인 스터디원별 해야할 일 목록)<br>- 최신 Article<br> |
| Study > Article: List | - 블로그 게시글 형태의 리스트 화면<br>- 메타데이터: 날짜, 작성자, 게시글 카테고리 (Information, Memory, Meaning, Time, Resource, etc), Topic keyword 등 |
| Study > Article: Detail | - 게시글 상세 화면<br>- 메타데이터 동일 |
| Study > Exploration Board | - 스터디 진행 중, 추가로 조사 및 학습하고 싶은 주제를 아카이빙 해놓는 곳<br>- 주제별 진행 상태 표기 필요 |
| Study > Topic Archiving | - 현재까지 진행한 스터디 주제 리스트업 (테이블 형태)<br>- 주제, 관련 아티클 링크<br>- 전체 토픽 리스트 (노션 URL 연결, 아직 진행하지 않은 주제도 포함) |
| 운영 > 회의록: List, Detail | - 회의 성격 구분: 정기 스터디 회의, 스터디 운영 회의 |
| 운영 > 템플릿 모음: List, Detail | - 아티클 가이드 템플릿, 회의록 템플릿 등 |
| 운영 > Inbox | - 어디에 넣어야할지 구분이 모호한 자료들 |
대충 이런겁니다.
대충 썼더니 빼먹은 내용이 있네요. 이따가 보완하는 단계에서 넣어야겠어요.
알잘딱으로 만들어준다면 좋겠지만요 ㅋㅋ
< 결과 >
스타일을 지정하지 않거나 참고 이미지를 넣지 않을 경우 대체로 이와 유사한 디자인이 나오는 것 같습니다.
뼈대는 적당히 잘 세워졌고, 디테일한 부분은 적당히 난리 났네요.
2. 스타일 정의
텍스트로 스타일을 제시할 수 있다만, 이미지 첨부 기능을 활용해보려합니다.
Pinterest에 틈틈히 담아둔 망태기를 뒤져 이미지를 첨부하고 간단히 프롬프트를 입력했습니다.
첨부한 이미지의 레이아웃, 디자인, 색감을 해당 서비스의 스타일에 참고해서 반영해주세요.(figma make에서, figma 디자인 파일을 바로 첨부 할 수도 있습니다.)
<결과>
책 관련 서비스처럼 나왔습니다. (의도한거 아님, 취향 아님)
첨부한 이미지의 느낌적인 느낌을 가져와주길 바라며 편집 디자인 이미지도 넣었는데,
그걸 UI로 오해하고 포스트잇 같은 카드를 넣어버렸어요.
전체적인 스타일을 지정할 땐 디바이스 혹은 플랫폼에 맞는 UI를 제공하는게 좋을 것 같습니다.
다시 제 취향을 한껏 반영한 웹 UI 이미지를 첨부합니다.
< 결과 2 >
처음에 입력했던 화면 구성에서 있어야할 걸 없애고, 언급한 적 없던게 나타나고 있습니다. 🤣
홈 화면 구성을 다시 확인하고 수정해줘.언급했던 구성대로 잘 됐습니다.
3. 특정 화면 콘텐츠/기능 보완(수정)
콘텐츠를 우선 채운 뒤, 특정 화면인 '홈'을 수정하려고 합니다.
아티클에 관한 데이터를 추가하고 싶은데 어떤 파일에서 수정하면 돼? 홈 화면의 최신 아티클에 노출되는 파일만 수정하고 싶어.이렇게 입력하니 알아서 코드에서 파일 구조를 변경해줍니다.
샘플 아티클 데이터를 진짜 아티클 데이터로 수정한 후, 그 외의 데이터를 알아서 채워넣습니다.
(미리보기 화면에 반영하려면 상단바에 새로고침 버튼을 누르면 됩니다)
그런 다음 홈 화면 수정을 위한 요청을 합니다.
와다다
Home 화면을 수정하자.
아래의 요청을 단계별로 하나씩 진행하고, 하나의 단계를 마치면 나에게 계속 진행할지 여부를 물어봐줘.
1. 팀원 정보에는 이름과 직무만 나오게 해줘.
2. 스터디 원칙은 아래의 '<스터디 원칙 초안>' 을 참고해서 재작성해줘.
<스터디 원칙 초안>
- 전문가의 마인드셋을 갖고 각자 선정한 주제를 스터디원에게 공유합니다.
(선택한 주제에 관해 내가 제대로 전달하지 않으면 스터디원은 평생 해당 주제를 알지 못할 것이라는 책임감을 갖고 준비에 임한다..!)
- 겉핡기 식의 지식 서치가아닌, 개념을 파고들어 각자의 인사이트풀한 결과물을 공유하며 서로의 사고를 확장하는데에 기여합니다.
3. 진행 중인 테스크는 팀원별로 확인할 수 있게 재구성해줘.
4. 최신 아티클이 메뉴 바로가기 상단에 위치하도록 함.
5. 최신 아티클에 컬럼별 노출 데이터를 다시 제안해줘. 썸네일 이미지도 보이게 할거야. 썸네일 이미지는 참고한 이미지를 각각 1:1로 반영해줘.
6. 'Get in touch' 는 모든 화면에서 보이도록 해줘.
7. Email, Location, Social 정보가 포함된 섹션은 제거해줘.커서에서는 위 프롬프트처럼 입력하면 하나씩 수정하고 다음 단계를 할지 추가 수정을 할지 물어보는데
피그마에서는 그냥 쭉 진행해버리네요 ;;
그래서 결과물도 썩 만족스럽지는 않습니다.
수정해야할 것들을 모두 손대면 다음주까지 해야할 것 같으니
'진행 중인 태스크' 영역만 수정하겠습니다.
현재 기준으로 태스크를 추가하고 지우고 하려면 직접 코드를 열어야합니다.
저는 이걸 GUI로 컨트롤하고 싶어요.
task 추가하는 기능 구현해줘
어쨌든 서울로 가면 된다고, 기능이 잘 반영됐습니다.
4. 세부 요소 다듬기
추가 수정을 진행합니다.
버튼을 누르면 새 태스크 추가하는 창이 팝업으로 나타나면 좋겠어.
또한, 입력된 태스크를 편집하거나 삭제할 수 있는 기능이 필요해. 무조건 버튼을 추가하지말고 사용자의 flow를 고려해서 적절한 인터렉션을 추가해줘.첨부한 이미지의 레이아웃을 참고해서 만들어줘. 이름이 1열, 이름에 대응하는 테스크들이 2열로 가도록 말이야.
그리고 수정하기와 삭제하기도 더보기를 눌러서 나오는게 아닌 해당 테스크 텍스트에 마우스 호버되면 아이콘이 나타났으면 해. 아이콘은 R값이 없고, 라인이 얇은거 (1px)로 해줘.< 결과 >
참고 디자인을 다시 제공하고, 이걸 다시 한 번 텍스트로 언급해서인지 디자인에 관한 지침도 얼추 반영했습니다.
그 외 기능도 잘 반영되었구요.
결과와 배운 점
커서나 다른 서비스들처럼 대화를 주고받으며 할 수 있는지 궁금해서 시도해봤는데, 그렇게는 못하나봅니다. 대화를 하려했지만, 코드를 수정해서 화면에 어떻게든 반영하려고 합니다. 아무래도 무조건 코드로 구현하도록 내부에 설정이 되있는 것 같아요.
한 번 보낸 채팅을 다시 편집할 수 없습니다. 말실수 했다가 다시 작업하는 불상사 발생합니다 😂
그간 얼마나 말을 편하게 해왔는지 깨달았습니다.아직 베타여서 그런지 한 번 프롬프트를 입력하면, 결과를 보기까지 조금 오래 걸립니다. (기능을 업데이트하며 해결될 문제라 보긴 합니다.)
어쩌다보니 단점들만 말했는데, 장점과 가능성 또한 많이 보입니다.
코드 입력 없이도 가능한 Hi-fi 프로토타이핑 툴 (디자인까지도 잘 구현해낸다면!)
그 외에 협업 기능도 있지만, 가장 강력한게 이거 아닐까 싶습니다.
개인적인 의견이지만, 사용자의 의도를 잘 분석하지 못하는 것 같습니다. 구체적이고 업계전문 용어(?)를 제대로 사용하지 않는다면 알잘딱 센스있는 결과물은 확률적으로 나올 것 같습니다. 하지만 이미지를 첨부하면 그에 따른 톤앤매너를 잘 가져옵니다. (아래 비교 이미지 참고)
( 동일 모델 'claude sonnet 3.7'을 사용하는 커서와 결과값을 비교해봤습니다.)
대화를 통한 편집, 코드 직접 입력하여 수정하는 것 외에도 편집 도구를 활용해 간단한 디자인을 수정할 수 있는 것도 장점이라 생각합니다.
팀에서 작업한 디자인 파일과의 연동도 좋아질테니 Figma 하나로 IT 프로덕트 개발 과정의 많은 단계를 커버할 것 같습니다.
도움 받은 글 (옵션)
Figma make 관련 DOC: https://help.figma.com/hc/en-us/categories/31304285531543-Figma-Make