폰트 미리보기 플랫폼 만들기 - Stitch 써보기

이번에 만드는 폰트 비교 플랫폼은 이런 스타일로 화면을 만들어보고 싶었다.
뉴모피즘 스타일인데, 그림자와 슬라이더 에셋을 상당히 완성도 높게 만들어 처음 봤을 때 어, 싶을 정도로 잘 만들어진 디자인이었다. 이 정도로 그림자를 잘 쓰면 디자인 퀄리티가 상당히 좋아지겠다, 생각이 들어 이 사이트 URL을 Stitch에게 제시했다.

URL을 붙여넣기 하자마자 상단에 URL을 인식한 칩이 뜨는 걸 확인할 수 있었다. 이제 AI 서비스는 기본적으로 URL을 인식하고 URL을 방문해 탐색하는 것이 가능해졌다는 걸 알 수 있는 구간이었다.

‘뉴모피즘’이라는 키워드를 내가 던져줘서 그런건지, 실제로 URL을 방문해봤는지는 모르겠지만 뉴모피즘이어떤 디자인이고, 어떤 식으로 작업해야 구현할 수 있는 스타일인지 알고 있다는 걸 확인했다.

위와 같은 결과물이 나왔다. 솔직히 놀랐다. 생각보다 구현을 잘 해주었다. 처음 기획이랑 초안을 잡을 때는 Gemini 3를 썼는데, 뉴모피즘 디자인 적용에는 Gemini 3.1을 썼다. 모델 차이가 생각보다 크게 나는 것 같다. Gemini 3.1을 쓰게 되면 HTML 변환이나 피그마 복사가 안되지만, 옆에 두고 참고자료로 쓸 만큼의 퀄리티는 충분히 뽑아주는 것을 확인할 수 있었다.

위 디자인이 Gemini 3, 아래 디자인이 Gemini 3.1로 만든 결과물이다.
비교해보면 UI 인상 자체가 많이 다르다는 걸 확인할 수 있다.

처음 디자인을 만들고 나서 다음으로 진행하는 작업으로는 크게 ‘추가페이지 제작’, ‘작업 페이지 수정’, ‘전체 리디자인’이 있다.
작업 페이지 수정과 전체 리디자인의 경우 작업방식이 조금 헷갈릴 수 있는데, 수정할 페이지를 선택하지 않고 수정해달라고 프롬프팅하면 ‘리디자인’을 진행해서 완전히 다른 결과물을 내놓는다.
똑같이 “메인컬러를 보라색으로 수정해달라”는 프롬프트를 썼는데 위는 화면을 선택해 일부 수정으로 진행됐고, 아래는 리디자인을 진행해 완전히 다른 UI가 나왔다.

헷갈릴 수는 있겠으나 차이를 알고 있다면 다양한 방식으로 시안을 뽑는 데에도 활용이 가능할 것이라 생각했다.

https://stitch.withgoogle.com/preview/240193465309378748?node-id=4208d56ef36947e5837a287402d7ad46

인스턴트 프로토타입도 잘 진행됐다.

인스턴트 프로토타입에는 ‘새 화면 상상하기’라는 메뉴가 있다. 추가 페이지를 프로토타입 메뉴에서 생성할 수 있게 되었다. 버튼을 누르니 네 가지 선택지 중에서 하나를 선택하라는 모달이 떴다. 네 개 중에 하나를 선택하면, 주제에 맞는 화면을 추가로 생성하고, 자동으로 먼저 만들어진 페이지와 연결까지 해준다.

물론 유저가 직접 프롬프팅해 화면을 만들 수도 있다.

화면을 여러 개 생성하면 일관성이 조금씩 떨어진다는 아쉬움은 있다. 컴포넌트를 정의하고 디자인 시스템을 가져와 사용한다고는 하지만, 레이아웃이나 컬러 사용(로고 컬러 등)에서 기존 화면과 엇나가는 요소를 몇 개 확인할 수 있었다.

피그마에 복사해보려고 내보내기 설정에 들어갔다가 흥미로운 메뉴를 발견했다. MCP로 내보내는 메뉴가 존재했다. 설정 가능한 클라이언트는 Cursor, Antigravity, VSCode, Claude Code, Gemini CLI, Codex, OpenCode, Jules 총 8가지 종류가 있었다.