소개
안녕하세요... 피그마MAKE 자식과 매일같이 싸우고 있는 하이호라고 합니다.
17기 피그마MAKE 수업을 들으면서 개인 포트폴리오 사이트를 바이브코딩하고 있습니다.
이번 글에서는
디자인 요청사항이 좀더 복잡한 세번째 화면을 구현하기 위해
피그마MAKE한테서 시달린 고통의 시행착오가 기록되어 있습니다.
https://www.gpters.org/uiux/post/testing-no-code-tools-Dy2d0101GO75EMu
이전 글
< 본문 >
이전 글에서 쓴 시행착오 이후로 하나씩 요소를 고쳐달라고 해서
꽤 괜찮은 1-2번 화면이 만들어졌습니다.
그럼 이제 다음 화면을 만들어야겠죠.
세 번째 화면을 만들자
세번째 화면은 메인화면으로,
요구사항이 좀더 많고 디자인이 더 복잡합니다.
느낌을 잘 살려야 하기 때문에 레퍼런스나 디자인적인 요청이 필요합니다.
컨셉
동산이 있고 동산 위에 건물들이 있고 건물을 클릭하면 다른 페이지로 넘어감.
중앙에 내 사진, 맨 오른쪽에 해가 있음.
픽셀 스타일 RPG 게임 같은 느낌AI한테 프롬프팅&기획 도움받자.
가. 먼저 레퍼런스를 주면서 컨셉을 간단하게 설명했습니다.
한국 텍스트와 케이크 사진이있는 페이지의 스크린 샷
나. 섹션 명칭과 경로, 컨셉을 제안해달라고 했습니다.
다. 툴팁 등 원하는 기능을 설명했습니다.
라. 전체적인 개요를 물어보았습니다.
한국어 문자 메시지의 스크린 샷
마. 피그마로 직접 만든 참고용 이미지를 주고, 네가 기획한 요소와 합쳐보라고 했습니다.
한국어 문자 메시지의 스크린 샷
이제 얘가 짜준 컨셉을 검토하고, 다른 아이디어도 얘기하고 해서
프롬프트를 짜달라고 하였습니다.
바. 너무 복잡하게 지시하면 애가 못알아들으니까
일단 애니메이션 효과 등을 다 뺴고 레이아웃(스캐폴딩이 더 적절한 표현?)만 잡으라고 했습니다.
이제 시도!
✝️ 첫번째 시도
한국의 UI 빌더 스크린 샷
됐다! AI 햄의 힘을 빌렸으니
이전과는 달리 잘 받아먹겠지? ^^
그러나..................
하늘에서 날아가는 새가있는 게임 스크린 샷
???
??
?
하늘에서 날아가는 연이있는 게임의 스크린 샷
???????????
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ;
악!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1
너무 황당해서 저 캡쳐 그대로 주면서
"이렇게 하지 말라"고 했습니다.
그렇지만...
한국어 버전의 스크린 샷
??? 네?
공중에서 날아가는 새가있는 게임 스크린 샷
아악!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
한국의 게임 스크린 샷
그냥 세번째 페이지 삭제하라고 했는데
어려워서 못하시겠대요.
✝️ 두번째 시도
어찌저찌 세번째 페이지를 삭제시키고 ....
가. 제가 예상하는 패착을 AI한테 물어보았습니다.
스캐폴딩 만들라고 하니까 못알아먹음
배경과 건물 아이콘을 2회로 쪼개서 지시했어야 함
처음에 지가 잘못 잡은 걸 계속 따라가는 AI의 게으름
프롬프트에 예시 사진 참고하라는 말이 없음
한국어 문자 메시지의 스크린 샷
나. 피그마MAKE가 황당하게 만든 이미지를 주면서
"너의 프롬프트 기반으로 저렇게 만들었으니 프롬프트 고쳐달라"고 요청하였습니다.
다. 지피티가 너의 컨셉을 그림으로 그려줄까 제안하길래 그려달라고 했습니다.
한국 캐릭터와 건물이있는 픽셀 게임
잘 그렸지만....
미묘하게 제가 원하는 바랑 달랐습니다.
=> 피그마 MAKE에게 제가 만든 이미지랑, 지피티가 짠 이미지 2개를 주고, 지피티 제작 프롬프트 주고
세 개 다 보고 내가 뭘 원하는지 생각해보라고 시켰습니다.
한국어 문자 메시지의 스크린 샷
피그마 MAKE가 생각한 걸 읽어보니 대충 잘 이해한 거 같고
자신있어해서
시켰더니........
백그라운드에 비행 대상이있는 게임 스크린 샷
앆!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
문제가 뭘까요?
예쁜 픽셀 아이콘은 여기 말고 따로 디자인해야 되는데 같이 시킨 것? 피그마MAKE 역량 너머의 것인가?
LLM 특성 상 하나를 정해서 시키는 것보다 자유롭게 디자인 맡기는 게 나은가?
아니면
✝️ 세번째 시도
우리 피쪽이 원래 디자인 잘하는 친구입니다. (근데 왜 나한테만)
제가 피쪽이의 가능성을 무시하고 레이아웃 그리라고 한계를 정해줘서
이 친구가 시들시들한 거 아닐까?
실력있는 디자이너를 마이크로컨트롤 하려고 해서 생긴 문제 아닐까?
픽셀 스타일대로 간단하게 컨셉 설명해서 만들라고 하면 오히려 잘하지 않을까?
한국 게임 스크린 샷
는 아니었습니다.
ㅋㅋ
역시 문제는 지피티가 준 프롬프트의 오류...
(가 아니고 피쪽이의 한계?)
✝️ 네번째 시도
사실 건물 이미지 직접 생성하든 찾든 해서 피그마 참고용 이미지에 제가 직접 배치하는 게 낫긴 할 겁니다...
그걸 기반으로 프롬프트 뽑아야 잘 나올 거고...
하지만 귀찮으니까
일단 레퍼런스 컴포넌트 이미지만 하나 더 던져주었습니다.
가. 우선 이미지 생성 AI를 활용하여 원하는 스타일의 건물 이미지를 뽑았습니다.
어두운 배경에 작은 픽셀 화 된 집
나. 이것만 레퍼런스로 던져주고, 알아서 디자인해보라고 시켰습니다.
지피티가 준 프롬프트에는 동산 위가 아닌 프레임 기준으로 아이콘 위치를 고정해버리는 오류가 있었으므로, 일단 제가 대충 프롬프트를 썼습니다.
세번째 화면 만들어. 이력서의 메인화면이야.
픽셀, RPG 컨셉이고
내가 준 이미지에서 느낌을 참고해.
1. 동산이 있고 하늘이 있음
2. 동산이랑 구름 위에 여러 건물들이 있는데, 이건 다른 페이지로 넘어가는 아이콘들임. (바탕화면처럼.) 건물들에 호버를 하면 어떤 페이지인지 설명하는 툴팁이 뜸
EX) 진리의 상아탑(교육/스터디)
3. - Place distinct pixel-art buildings representing:
- Training Forest
- Giant’s Library
- Tower of Truth
- Alchemist's Lab
- Merchant's Hall
- Rabbit Hole (subtle, hidden near lower hill)
4. 동산의 중앙 갈라진 부분에 거대한 사람 실루엣이 보임. 내가 첨부한 내 사진 넣어.결과는....
픽셀 슈터 - 스크린 샷 썸네일
(환장)
제가 준 프롬프트를 지키는 게 아니라
삭제하라고 했던 원래 코드를 써먹네요 이 친구가
문제를 분석해서 고치라고 계속 요청했는데
공중에서 날아가는 남자와 함께 게임의 스크린 샷
결과는 이 모양 이 꼬라지입니다.
파란색 배경에 선글라스가있는 노란색 태양
(무슨 문제라도? 라는 표정)
파란색 배경에 녹색, 빨간색 및 파란색 줄무늬 패턴
이게.. "수련의 숲"?
"멋있지가 않잖아"
한국 게임 스크린 샷
와... 멋있지 않다고 긁었더니
진짜 멋지게 말아줬습니다.
자이언트 도서관
와... 아이콘 호버 효과입니다.
ㄹㅇ 멋지다.
+) 대단한 점:
음악도 나옵니다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
다. 혹시 처음에 잘못된 코드를 얘가 계속 우려먹어서 그런걸 수도 있으니까, 순결한 파일을 켜서 지피티 프롬프트로 요청했습니다.
많은 다른 개체가있는 게임 스크린 샷
상태 여전히 심각. ...
지피티가 짜준 프롬프트가 문제였습니다...
(해님 왜 옷벗었냐고)
같은 파일에 다시 프롬프트를 입력해보았는데
?
✝️ 다섯 번째 시도
제가 준 이미지대로 만들라고 했습니다 그냥
프롬프트는 간단하게 이렇게:
1번 동산 이미지에다가
2번 같은 픽셀 건물이 동산이랑 구름 위에 6개 정도 놓이게 해줘.
전체적인 느낌은 픽셀 레트로 게임풍이야.결과는:
동산이랑 구름 위에 건물을 세우라고 했는데 못 알아먹네요. 그렇지만
이제까지 중에 제일 낫습니다!
역시 정말 제가 직접 그려서 그대로 만들라고 시키는 게 맞는 거였습니다.
🤔 그럼 구린 디자인은 어떻게 하는가?
WHISK AI (?) 등의 사진을 사진으로 바꾸는 걸 써보고
바꿔달라 해야겠습니다...
< 에필로그 >
결과 🥲
안타깝게도 시행착오를 더 이어가야 합니다.
저의 DON'T GO SHOW 는 (슬프게도) 끝나지 않습니다... (어쩌면 영원히...)
배운 점
레퍼런스 줄 때 아이콘 하나만 덜렁 주고 그런 짓은 안된다. 피그마MAKE는 그런 수준의 디자인 능력이 없다.
게임맵 디자인 못함. 픽셀풍 못뽑음.
태블릿에서 3D 게임의 스크린 샷
(아.. 왜지 그럼 복잡한 디자인 할 떄 컴포넌트 하나하나 찾아서 줘야 하나)
지피티가 준 프롬프트를 그대로 믿지 말라
레이어 간 계층을 고려해야 한다
어쨌거나 직접 그려서 주는 게 짜세다.
다른 디자인/이미지 툴을 활용하자
AI는 상대적 위치 개념을 잘 이해하지 못한다. (동산과 구름 위에 두라고 해도 못 알아먹는다. 이거 코드로 어떻게 표현해야 하지)
세세하게 통제하려 하지 말고 AI한테 맡기는 게 그냥 속 편하다
☪️ 액션 포인트 요약
이미지 AI 써서 컴포넌트 준비
이미지 투 이미지 AI 사용해서 UI 디자인 업그레이드
피그마 MAKE용 프롬프트 형식 다듬기
시스템 프롬프트 읽어보기
가이드 프롬프트 활용하기
HTML 코드를 긁어서 다른 AI한테 해석시켜달라고 하고 원인을 먼저 찾은 다음에 고쳐달라고 해보자.
원하는 이미지, 내가 만든 이미지의 디자인 시스템을 AI한테 분석하라고 시키자
☪️ 도움이 필요한 부분이 있나요?
화면 하나 설계하는데도 애니메이션 이것저것 해서 오래 걸릴 거 같은데, 파일 하나 당 화면 1-2개만 만들고 나중에 총합할 방법은 없을까요?
피그마MAKE와 레 플릿의 기술스택을 맞추고 먼저 세팅을 한 다음
화면들을 섹션별로 묶어서 각 섹션별로 MAKE 파일로 제작
각 부분들의 순서와 넘어가는 효과 등을 따로 TSX 파일로 제작해달라고 함
그거를 이제 레플릿 같은 툴한테 줘서 알아서 합치라 하기
아직 화면 3번째 만드는데도 버전이 100을 넘었습니다. 이거 버전 많아지면 느려지거나 오류 생기거나 하겠죠?
어쩌지? 머릿속에 있는 구상을 구현하는 건 아직 꿈이란 말인가?어떻게 설명해야 동산 위에 건물을 올려주나요? 환경파괴에 반대하는 전력소모왕 AI ㄷ
---
여담
한국어 앱의 스크린 샷
