피그마 메이크 AI로 눈에 띄는 홈페이지 만들기

피그마 Make의 사용방법과 한계

Background

현재 제가 일하고 있는 프리랜서 팀에서 지금까지 해 온 프로젝트를 정리하고, 앞으로 더 좋은 프로젝트를 수주하기 위한 홈페이지를 제작하고자 했습니다. AI 기술에 특화된 팀이기 때문에 기존 SI 기업들과 다르게 홈페이지 첫 화면부터 AI 챗봇 기능을 넣어보자는 이야기를 했습니다.

Difficulty

AI챗봇을 상징하는 인터랙션을 만들고자 했습니다. 에펙으로 구현하자니 오래 걸린다는 문제가 있었고, 피그마로 구현하자니 코드 기반의 인터랙션이 아니기 때문에 겉보기에만 그럴듯한 인터랙션이 된다는 문제가 있었습니다.

The Use of AI

최근 '피튜브'에서 피그마 Make관련 강의를 들은 것이 생각났습니다. 피그마 메이크 기능을 활용하면 원하는 인터랙션을 만들어서 사용할 수 있을 것이라고 생각했습니다. 결과적으로 아래와 같은 인터랙션을 만들었습니다.

How to

1. 레퍼런스 수집

핀터레스트에서 'AI chat UI'라고 검색한 결과물 중 마음에 드는 것을 선택했습니다.

2. Figma make에 레퍼런스 이미지를 넣고 프롬프트 입력

마우스를 호버하면 움직이는 인터랙션, 구형 형태, 다크 모드 배경에 미래지향적

3. 레이아웃 레퍼런스 제공

채팅화면을 추가한 레이아웃을 만들고자 했으나 프롬프트만으로는 쉽지 않아서 피그마에서 대략적인 레이아웃을 만든 후 레퍼런스로 주었습니다.

레이아웃은 이걸 따라줘. 왼쪽에 인터랙션이 있고, 우측에는 챗봇 화면이 있어. 인터랙션은 2d 원형이 아닌 3D 구형이고, 형태가 바뀌기보다 안의 색상이 일렁이도록 해줘.

4. 아이디어 추가

레퍼런스를 더 서치하고, 원하는 느낌을 찾아가며 여러 시도를 해 봅니다.

마우스를 움직이면 눈이 따라 움직이는 형태로 만들어줘

가장자리 stroke에 blur처리를 해서 비눗방울처럼 보이게 해줘.

사용자가 채팅을 쳐서 엔터를 누르면, 구형 캐릭터 위에 생각하는 듯한 '...' 말풍선을 띄워줘. 말풍선은 캐릭터와 어울리도록 디자인해줘

5. 피그마 활용 버전업

디테일한 요구사항이나 전체 레이아웃 변경은 못 알아듣는 경우가 많았습니다. 이 과정에서 피그마로 돌아가 레이아웃을 잡고 디테일한 요소를 추가해 제공했습니다.

만들어진 구형 캐릭터만 캡처하여 피그마에서 레이아웃을 다시 잡은 후 레퍼런스로 전달

별 모양은 피그마에서 만든 후 피그마 Make로 전달

선을 띄워줘. 말풍선은 캐릭터와 어울리도록 디자인해 줘

Results

인터랙션을 만든 후 최종 작업은 피그마에서 이루어졌습니다. 결과적으로 홈페이지가 잘 만들어졌습니다.

https://fornerds.ai/

Insights

- 레퍼런스를 잘 참고하여 제작하며, 명령어를 넣을 경우 최대한 충실하게 반영하는 모습을 보였습니다.

- 전체 레이아웃이나 세부적인 부분은 프롬프트만으로는 이해하지 못해 적합한 레퍼런스를 찾거나, 만들어 전달해야 하는 한계가 있었습니다.

- 아직 완전한 홈페이지 디자인을 해내지는 못하지만, 특정 부분에 들어갈 인터랙션을 만드는 것은 효과적으로 수행한다는 것을 알 수 있었습니다.