Figma Make를 통해 "고민박스" 프로젝트 웹사이트 만들기!

📌 소개

저는 이번 17기 Figma 스터디에 참여하게된 제잼스라고 합니다!

저는 현재 UX 디자이너 포트폴리오를 위해서 여러가지 지역사회 프로젝트를 진행중에 있는데요, 그 중 하나는 '고민박스' 프로젝트입니다.

이번 스터디에 참여하기 전, 아래 그림과 같은 박스를 만들어 10대-20대 친구들한테서 고민거리를 받아놓았습니다.

내가 웹사이트를 만들어 그곳에 나름대로의 해결책을 게재해주리라, 말은 하였지만 막상 웹사이트를 만드자니 막막했습니다. 제가 웹사이트 빌더를 통해 제작해 본 적은 없었지만, 이렇게 커스터마이즈가 많이 필요할 것 같은 웹사이트는 만들어 본 적이 없는지라, 곤란하였습니다.

📌 진행 방법

저는 이번 다이앤님이 가르쳐주신 Figma Make를 사용했습니다.

먼저, 가르쳐주신 대로 챗지피티에게 UI Builder 프롬프트 생성을 부탁하였습니다. 이미지를 첨부, '시각적 소재'를 주어 '스타일 - 전체적인 시각적 표현 방식'에 방향성을 주었습니다.

챗지피티가 생성한 프롬프트는 다음과 같습니다.

"Design a static landing page in the style of Microsoft Outlook 2003 for a web project titled 'Concern in a Box'. The site displays a list of pre-collected concerns and their responses in a classic email inbox layout. Use a left-side folder list (Inbox, Archives, Deleted), a center email list table (From, Subject, Received Date), and a top toolbar (Open, Print, Help). Clicking on an email opens a detail view in a lower pane or popup window. Apply a Windows XP retro design: use a pixelated sans-serif font (Tahoma or MS Sans Serif), flat grey/beige color palette (#F0F0F0, #D4D0C8), and classic pixel-style icons. Avoid any modern design elements such as animations, gradients, or startup-style layouts. The site should feel like a static desktop application from the early 2000s."

아쉽게도 맨 처음 버전은 스크릿 샷을 찍어두지 않았지만, 컨셉에 맞추어 정말 그럴듯하게 웹사이트가 생성되었을 때 너무 신기했습니다!! 🥹🥹🥹

아래 사진과 같이 프롬프팅만으로도 대화상자까지 만들 수 있었습니다.

대단하다고 느꼈던 점은, 웹사이트가 맨 처음 버전에서도 얼추 반응형으로 생성되었다는 점입니다.

하지만 창을 줄일시, 내용물이 많이 잘리는 점을 볼 수 있었습니다.

다시 프롬프팅을 통해, 햄버거 메뉴를 만들어 주었습니다.

지금 모바일 뷰에서는 모든 내용이 안 보여. Tablet 하고 Mobile 뷰에서는 "Concern in a Box, Inbox, Archives, Deleted Items"를 햄버거 메뉴로 열었다 닫았다 할수있는 side navigation menu로 바뀌는 breakpoint를 설정해줘.

이제 이런 식으로 햄버거 메뉴까지 만들어 주었습니다!