프롤로그
안녕하새요. 저는 바이브코딩에 관심 많은 주니어 기획자 하이호입니다.
이번에 지피터스 17기를 듣고 있습니다.
(지피터스에 ai 굇수들 많아여 ㄷㄷㄷ 아 빨리 따라잡고 싶어서 조급한데 시간이 없어요 다들 뭔 얘기 하시는지 알고 싶엉 하이호는 열린문입니다 많이 갈쳐주세요)
피그마 make로 웹사이트 만들기~ 라는 수업을 듣고 있는데
1주차 과제가 "개발 목표 설정, Figma를 활용한 키스크린(초안) 설계"여서요, 어떤 아이디어로 만들지 고민이었습니다. 스터디 기간과 예상 개발 규모 등도 고려하고요…
스터디 채팅방에도 여쭤보고, AI 친구들(친구비 안내면 안놀아주는 그들ㅠ)에게도 조언을 구해보고, 고민을 2304번 거듭한 결과 결정할 수 있었습니다.
화려한 이력서 웹사이트를 만들겠다!!고 결심
293455일 전에 생각했던 ‘화려하고 재밌는 개인 이력서 사이트’를 만들어야겠다고 결정했습니다.
이 스터디를 통해 가져갈 역량을 ‘내가 원하는 UI와 애니메이션 효과를 AI에게 적용하는 법’으로 삼는 것도 타당하지 않을까 생각했습니다.
처음에는 해당 아이디어의 예상 기능이 너무 간단해서 스터디해갈 게 있을지 고민했었습니다.
그럼에도 결정한 이유는 3가지가 있습니다.
특화된 디자인을 구 현하는 것을 연습해야 해서
피그마MAKE는 에셋을 가져오거나, 커뮤니티 템플릿을 쓰거나, 직접 특정 포인트를 일부분 수정할 수 있어서 커스텀 디자인에 최적화되어 있어보이고
스터디에서 피그마MAKE(또는 아우라)처럼 디자인에 특화된 노코드툴을 사용하는 의의가 있을 것이며 (아님 러버블 등 다른 거 쓰면 되니까)
저는 원하는 디자인, 효과를 잘 구현하는 법을 아직 모르기에 학습할 필요가 있어서입니다
간단한 기능 구현도 하나씩 배워야 하는 입문 단계라서
복잡한 기능을 구현하는 건 어차피 제 수준에서 무리일 거고
퍼블리싱하는 법, 슈퍼베이스와 에어테이블과 연결하는 법, 커스텀 이미지를 붙이는 법 등도 아직 잘 모릅니다.
오히려 이력서 사이트처럼 간단한 기능이 있을 거라고 추측되는 사이트가 제 수준에 적합할 거 같아요.
게다가 디자인적 요소 말고도 은근히 얻어갈 것이 있을 거라고 유추됩니다
특정 사진을 적용하는 법
공유, 링크 연동 기능
퍼블리싱 & 수정 어떻게 할지
여러가지 글을 어떻게 깔끔한 템플릿에 맞춰 올릴지
관리자 페이지로 연동하는 게 나을지?
여러 노코드 툴 테스트 해보기!
피그마 make를 해보기 전에…
제가 사실 아직도 피그마 결제를 안했습니다.
ㅋㅋ
왜냐면
결제가 복잡하다 ( 그래서 미룬 게 큼)
한달치만 결제할건데, 뽕 뽑아야 하기 때문에 키스크린을 몇 장 만들어놓고 시작하려고
피그마make의 성능을 체감&비교하려면 다른 유사한 툴을 먼저 테스트 해보려고
키스크린 2장 그리기
일단 키스크린을 그려야 하니까
먼저 간단하게 온보딩 화면 2개만 그렸습니다.
(사유: 시간 없음)
처음에는 종이노트로 로우파이를 끄적이고 피그마로 옮겨서 그렸습니다.
그리고 이 모든 걸 한 프레임에 가둬서 이미지로 저장했습니다.
(가려둔 저의 얼굴이 궁금하시다면… 면접은 열린문!)
첫번째 화면에서 마법자 모자를 쓴 제가
“인재를 찾으러 오셨다면 잘 왔다”라는 말을 하고
클릭하면 “let me~” 어쩌고 문구가 뜹니다.
한번 더 클릭하면 커튼이 걷히면서 이력서 메인화면으로 넘어가는 구조입니다.
툴에 넣어보다
이제 이 이미지를 여러 툴에 넣으면서
프롬프트는 진짜 간단하게
내가 이력서 홈페이지를 만들건데
링크를 클릭했을 때 메인화면 전에 보이는 온보딩 화면을 그려봤어. 나는 디자이너가 아니라서, 로우파이로 그렸으니까 원본을 따라하지는 말아줘.
이걸 애니메이션 효과와 그래픽 등을 넣어서 컨셉을 예쁘게 잘 살려볼래?
첫번째 화면에 있는 사람 이미지는 내가 따로 첨부한 이미지를 쓰면 돼.
라고 대충 적었습니다…
lovable
처음에 이렇게 만들어서
첫번째 사진이 아, 스토리보드인 걸 몰랐구나 싶었습니다.
다른 툴들은 두번째 사진을 저기에 넣어주지 않았는데
러버블은 잘 받아먹는 것도 특징!
스토리보드임을 명시하니까 스토리보드의 캡션을 넣는 짓은 고쳤는데
지시한 컨셉은 안지키더라구요.
왜냐면 제가 프롬프트에
“디자인을 잘 업그레이드 시켜줘” 라고 넣었기 때문입니다.
이 때문에 프롬프트 가중치를 낮게 잡았나봐요.
그래서 지켜달라 말했는데… 색깔이랑 말풍선인 것만 반영하였습니다.
근데 이게 제 잘못이었는 게
제가 여기에 올리는 용도로 캡션 가려둔 버전을 줬지 뭐예요!
러버블이 얻을 수 있는 정보가 한정적이었던 거죠..!
ㅠㅠㅠ 이렇게 시행착오 하는 동안 무료 사용량 다 써버렸고…
제대로 된 테스트는 내일 해야 됩니다.
Bolt
390492년 동안 아무것도 안되더니
램 부족으로 튕겼다 다시 키니까 프롬프트가 없어져있네요.
저 하얀 화면만 이틀째 봅니다.
?
?
??
google ai studio
이미지 업로드도 전혀 안되고
미묘하게 안고쳐줍니다
이거 몇번 수정을 요청한 결과물입니다.
근데 이게 나름 요청대로 잘만들어둔 거라는 걸 다른 걸 보면 알 수 있습니다.
챗지피티 4o
ㅎ… ㅎ..!
기가 찹니다.
클로드 (무료)
ㅎ… 눈 날리는 효과 넣어주네요.
수정을 요청했더니 대화 길이 제한을 걸었어요….
ㅎ….ㅎ.
제 점수는요
1등! 러버블
2등! 구글 ai 스튜디오
3등… 클로드
4등 볼트와 챗지피티 4o 모델
단, 이미지 실수 때문에 테스트 오류가 있으므로, 재대로 된 평가가 아닐 수 있음.
ㅎㅎ ㅠㅠ
에필로그
결론적으로는 대부분의 노코드툴이 낮은 수준의 스토리보드는 알아먹지 못한다는 걸 알 수 있었습니다.
잘 설명하는 역량이 중요할 듯 하네요…
ㅠㅠㅠ… 저품질 눈물
개선방향은? 🤔
최대 노력 방안
다른 노코드툴 시도
레퍼런스 조사
애니메이션 효과 사이트에서 원하는 효과를 찾는다
해외 직업인, 아이돌/mz 아티스트 홍보 페이지 등을 찾아본다
피그마 커뮤니티, ui 디자인 사이트 등
프롬프트 연구/고도화
노코드툴 내부 프롬프트 유출본을 분석하여 최적화 전략을 찾는다
ux 빌더 봇을 싸그리 수소문하여 하나하나 짜본다
스토리보드 퀄리티 높이기
에셋 제작하여 make에게 전달하기
프로토타이핑을 통한 일부 애니메이션 호과 구현 (gif를 못받아먹으면 설정 캡쳐해서 보여주기)
커튼 배경 등 몇멏 요소를 이미지 찾아서 넣기
현실적 관점
스터디장님을 비롯한 엘리트분들이 댓글로 조언을 달아주시길 기다린다. 🥲
스터디 톡방에 눈물로 도움을 호소한다.
피그마make라도 알아듣기를 바래본다.
스터디에서 알게 된 ux 빌더 봇 및 ai를 사용하여 프롬프트를 다듬어본다.
프롬프트를 일부 수정한다
스토리보드임을 명시하고
두번째 사진을 넣으라고 하고
컨셉 최대한 지키라고 하기
<끗.>
(왜 에디터에서 문단 띄워쓰기 한 게 안먹힐까요??)
3줄 요약
내가 원하는 디자인을 바이브코딩으로 구현하고 싶은데
일단 피그마make 사용하기 전에 다른 툴들을 써보았다
러버블이 잘하고, 볼트는 먹통이고, 구글 ai 스튜디오는 좀 아쉬워요.
