figma make가 공짜라고 해서 냉큼 상담 기록 및 분석 사이트

소개

TODO 리스트를 안지 2달 정도 지난거 같은데, 이젠 온갖 개발 및 디자인 툴이 나오는데, AI 시대 이전에 찍먹했던 디자인 전문 툴인 FIGMA로 웹 디자인을 AI로 할 수 있다는 소문을 듣고 염탐하다가 드디어 마지막주차에 다이앤님의 VOD 수업을 겨우겨우 찾아서 듣고 만들게 되었습니다.

진행 방법

일단 만들자 -> 역시나 삽질

다이앤님의 채찍피티를 이용해서 빌드를 해보니 이렇게 뚝딱뚝딱 몇 마디 물어보더니 쫘라라라 설명과 함께 맨 뒤에 프롬프트를 주네요!

뭔지 모르게 깔끔하게는 나왔지만 내가 원하는 구도는 전혀아님!
그럼 수정해볼까? -> 응 실패야

이번엔 제대로 된 도식과 페이지 정리를 요청!@

하지만 디자인 시스템은 전혀 변경 없이 그냥... 필요 없는 부분이 사라지기만 함...
에잇 그럼 그냥 다시 프롬프트를 짜오자 -> 그래도 실패야...?
좋아 안되겠다 https://www.awwwards.com/ 에서 참조 사이트를 찾아볼까? -> 응 맞아 이거야!

다이앤님에게 지난 모임 저녁에 우연히 듣게된 사이트를 활용해 보기로 결정!@!

DARK 모드를 좋아하는 물결이 취향에 맞게 완성! 눈부심을 방지해주겠지?
조금더 채찍피티를 닦달해서 수정한 다음에 디자인 샘플을 같이 피그마에 넣으니까 훨~~~~씬 좋은 디자인이 나오는 것을 확인했습니다.

즉, 피그마라고 알아서? 좋은 디자인을 뽑는 것은 아니니 휴먼이 열심히 좋은 디자인을 찾아다녀야 한다는거... 아니면 상상력을 풀로 돌리시던가~!
Figma make 무료라길래 신나게 질문했는데, 5번이 한계였어?????
어쩔 수 없군... 커서로 간다!

우선 커서에서 딸려나온 가이드문서에 내 코드에 맞는 프로젝트 룰을 설정! 이 때 여진님의 꿀팁들을 몽땅 때려넣기!

는 아니고 괜찮아 보이는거 쏙쏙 빼서 넣기!

그리고 디자인 시스템 md 파일 만들고, 프로젝트 룰에서 이 md 파일을 무조건 참조하도록 해서 디자인 일관성을 해치지 않고 개발이 가능하도록 세팅했어요
그리고 피그마 메이크에서 커서로 올때 문제점 해결하기 --> 바로 "의존성" 문제 해결

이유는 피그마는 커서로 가는 것을 상정하지 않고 자기에게 필요한 파일만 있는 것을 발견! 그래서 커서에게 바로 '의존성'을 해결하라고 합니다. 의존성이란 필요한 라이브러리나 패키지 파일 그리고 그것들을 정리한 package.json 에 대한 것입니다. 이 파일이 있어야지 프로그램이 제대로 구동된다는 것!!
이제 투두리스트랑 로그 문서 만들어서 개발을 뚝딱

투두리스트는 날짜 기준으로만 작업하고, log는 제목도 넣게 했더니(여진님 꿀팁에서 차용) 중간에 한 번 로그 기록 남기고 또 수정하고 남기니까 파일이 2개 생성. 이 문제는 나중에 해결하기로 함
어쨌든 약 4시간여 정도의 시간을 투입해서 뚝딱뚝딱 기초 기능을 만들었네요!