제일 먼저 컬러 팔레트를 만들기 위해 Chat GPT, Gemini, Perplexity에 같은 내용을 작성해봤습니다.
이전 글에서 정리했던 제품의 기본 설명과 메인 컬러를 말하고 컬러 팔레트와 WCAG 체크까지 요청 했습니다.

세 개의 LLM 모두 처음에 요청 했던 메인 컬러의 대비가 부족하다는 피드백이 있어서 명도를 낮춘 컬러 추천을 요청 해봤습니다. 처음 메인 컬러인 #59BA83은 산뜻한 중간 톤의 녹색 계열인데 각 LLM이 어떤 결과를 보여줄까요?

하나씩 보면

Gemini

제미나이는 처음 요청 색에서 명도를 확실하게 낮춘 값 2개의 역할과 대비율을 함께 추천합니다.

Copilot ChatGPT

GPT도 명도를 조절했지만 제미나이보다 명도 차이가 크지 않고, 처음 컬러와 유사한 중간 톤의 녹색을 추천합니다.

Perflexity

Perflexity는 Gemini와 GPT의 중간 정도로 명도를 낮춰 1가지 컬러를 추천하고 호버용과 서브톤을 함께 제안하는 방식입니다.

제가 의도했던 ‘명도를 낮춰줘’라는 요청은 ChatGPT와 Perflexity가 가깝습니다. 기존 메인 컬러의 톤과 느낌을 최대한 유지하면서 대비만 높아지기를 원했으니까요. Gemini는 요청을 기술적으로 받아들이는 느낌이 강한 것 같습니다.

다음에 컬러를 요청할 때는 제가 원하는 결과를 좀더 세부적으로 적어야 겠다는 교훈을 얻었습니다. 그리고 UI디자인에서는 다른 LLM을 활용해보고 싶었는데 결국 GPT와 계속 하게 됐네요.

GPT의 두 번째 추천 컬러인 #3E8C61에 대해 다시 한번 팔레트를 요청하고 JSON 코드 스니펫으로 만들어달라고 했습니다. 컬러 값을 JSON 코드 스니펫으로 받으면 복사 붙여넣기를 반복하지 않고 피그마에서 import하기에 훨씬 용이합니다.

플러그인이 description과 name까지 반영해주지는 않아서 수작업을 조금 해줘야 합니다. 그리고 이전 글에서 figma make로 만들었던 프로토타입의 화면 1개를 피그마 파일에 복사해서 컬러 팔레트를 적용해보며 조합을 간단하게 테스트합니다.

테스트한 이 컬러 값을 json 방식으로 figma make에게 UI에 반영해달라는 요청을 했고 2분 뒤 결과물은..

직접 테스트하며 적용한 컬러와 조금의 차이가 있네요. figma make도 gemini와 마찬가지로 기계적인 해석으로 적용을 하는 건 어쩔 수 없는 것 같습니다. 수정할 부분을 정확하게 지정해서 요청하려면 make가 만든 리액트 코드를 읽어야 하는데 코드에 대한 이해가 없으면 이 방식으로는 어려울 수 있습니다. 결국 처음에 적었던 정의서 내용처럼 ‘보증 일자 태그’라고 지칭하여 요청하는 수 밖에 없습니다.

Typography, Spacing 등 다른 베이스 값들도 컬러와 같은 방식으로 figma make에 적용하면 여러 화면을 모두 수정해보지 않아도 프로토타입을 위해 결과를 확인할 수 있다는건 확실히 작업 속도를 높일 수 있는 큰 장점입니다.

다음은 온보딩 화면 1개에 일러스트 프로토타이핑을 만들고, 피그마 메이크 파일 안에 넣어보고자 했습니다.

피그마 파일의 프레임을 복사해서 붙여넣고 중앙에 넣어달라고 요청 했지만 문장을 이미지로 덮어버립니다.

이후에 여러 차례 정렬에 대한 요청을 했지만 이 문제는 프롬프트 요청으로 고쳐지지 않았고, 프레임에 적용된 프로토타이핑도 재생되지 않았습니다. 대신 gif 파일을 넣으면 위치가 적절하고 재생도 되지만 픽셀이 심하게 깨지는 현상이 있습니다. (위치 문제는 리액트 코드로 요청하면 수정할 수 있을거라 생각 되지만…)

피그마 메이크로 만드는 간단한 프로토타입의 범위는 이정도로 생각해야 할 것 같습니다. 피그마 메이크는 아이디어를 빠르게 시각화하는 것은 강력하지만, 완성도 높은 결과물을 기대하기에는 무리가 있습니다. 이후 정식 출시와 유료 요금제가 추가 되면 좀더 좋아질 수는 있겠지만 현재는 이번 작업 정도의 활용을 기대할 수 있겠습니다.

이제 이 작업을 마무리 해야하니 다음 글에서는 완성 화면을 올리겠습니다