HTML 화면설계 다음에 Figma가 온다

HTML 화면설계면 개발 미팅은 열립니다. Figma는 그다음입니다. 화면이 없는데 피그마부터 열면, 색이 먼저 생기고 흐름은 나중에 붙어요.

클라비 화면설계는 HTML 화면입니다. 내보내기 메뉴의 Figma는 캡처 페이지를 연 뒤, 피그마 캔버스에 붙여 넣는 길이에요. 컴포넌트 라이브러리가 자동으로 맞춰지지는 않습니다. 밸류랩스 의뢰는 들은 말이 Figma 화면이 됩니다. 길은 둘이고, 순서가 다릅니다.

이 글은 맡기는 법을 다시 쓰지 않습니다. 그 길은 밸류랩스 소개에 있습니다. 여기서는 HTML로 충분한 때와, 그래도 Figma가 필요한 때를 가릅니다. 2026년 9월, 라이브 화면설계와 서비스 소개를 기준으로 한 정찰 기록입니다.

두 산출이 하는 일이 다릅니다

같은 「화면」이라는 말을 써도, 남는 게 다릅니다. 표로 접으면 이렇습니다.

HTML은 무엇이 어디에 있는지를 고정합니다. Figma는 그것이 브랜드처럼 보이게 만드는 도구예요. 순서를 바꾸면 예쁜 홈만 늘고, 글쓰기와 결제는 비어 있습니다. 미팅은 다시 처음으로 돌아가요.

실사용 — 언제 어느 쪽으로

갈림은 취향이 아닙니다. 다음에 그 화면을 누가 쓰느냐입니다.

HTML이면 충분한 때

개발사 미팅, 내부 합의, AI로 코드를 붙이는 자리입니다. 눌러 보는 흐름이 있으면 됩니다. 버튼 이름과 다음 화면만 같으면, 그림자가 없어도 말은 통해요.

셀프 경로는 여기서 멈출 수 있습니다. 화면 한 장이 HTML 한 장입니다. 기능정의와 개발 패키지 ZIP까지 묶이면 기획 산출은 나가요. 운영 코드가 아니라는 한계는 화면설계 갤러리에 적어 두었습니다.

직접 넣어 본 미팅에서는 HTML 화면이 있으면 「이 버튼 다음은 뭐예요」가 나옵니다. 예쁜 홈 한 장만 있으면 「전체 화면은 언제 나오나요」가 나와요. 질문이 흐름으로 바뀌면, 그 화면은 이미 일을 한 겁니다.

그래도 Figma가 필요한 때

브랜드 컬러와 타이포를 맞춰야 할 때입니다. 투자자에게 넣을 덱, 디자이너가 이미 쓰는 컴포넌트 라이브러리, 하이파이 시안. 이 세 가지는 HTML만으로 끝나지 않아요.

와이어는 미팅에서 「아직 생각 중」으로 읽힙니다. 하이파이는 「이미 있는 서비스」처럼 읽혀요. 덱에서는 그 차이가 큽니다. 클라비는 그 자리를 대체하지 않습니다. HTML 다음에 Figma가 오는 이유예요.

셀프 경로의 Figma 내보내기

내보내기 메뉴의 Figma를 누르면 캡처 페이지가 열립니다. 「피그마로 보내기」를 누른 뒤, 피그마 캔버스에 붙여 넣습니다. 캡처가 먼저고, 붙여넣기가 나중이에요.

컴포넌트가 자동으로 매핑되지 않습니다. 버튼이 팀 라이브러리의 버튼으로 바뀌지 않아요. 레이어가 생기는 일과 디자인 시스템이 붙는 일은 다른 일입니다. 붙여 넣은 뒤에는 Figma에서 다시 다듬습니다.

의뢰 경로의 Figma

밸류랩스에 맡기면 산출의 중심이 Figma입니다. 메인 타겟, 메뉴 구조, 일정, Figma 화면. 플랫폼 기획은 보통 4~6주예요. 견적은 화면이 정해진 뒤에 나갑니다.

들은 말이 화면이 되는 길입니다. 혼자 HTML을 그리다가 브랜드와 하이파이가 필요해지면, 그 지점부터 의뢰가 맞아요. 네 단계는 소개 글에 있고, 여기서는 순서만 말합니다. HTML 내보내기가 의뢰 산출이 아닙니다. 같은 사이트에 두 길이 있어도, 산출을 같은 말로 부르면 미팅이 어긋납니다.

고르는 기준 세 가지

기준은 세 개면 충분합니다. 순서대로 물어 보세요.

1. 다음에 이 화면을 누가 보나 — 개발과 내부면 HTML입니다. 투자자와 브랜드 리뷰면 Figma예요.
2. 지금 고정할 것이 흐름인가, 인상인가 — 버튼과 다음 화면이면 HTML입니다. 컬러와 타이포면 Figma예요.
3. 라이브러리를 이미 쓰나 — 팀 컴포넌트가 있으면 붙여넣기만으로 끝나지 않습니다. 그 파일에서 다시 맞춰야 해요.

앞의 두 개가 HTML이면, 피그마는 미뤄도 됩니다. 세 번째가 「이미 쓴다」면 HTML만으로 끝내지 마세요.

되는 것 vs 안 되는 것

• 되는 것. HTML로 흐름을 먼저 고정한다. 개발 미팅을 연다. 필요하면 캡처 페이지에서 피그마로 붙여 넣는다. 브랜드·하이파이·투자 덱은 Figma로 이어 간다. 의뢰는 Figma를 산출로 받는다.
• 안 되는 것. 클라비가 Figma를 대체한다고 가정한다. 붙여넣기로 컴포넌트 라이브러리가 동기화된다고 가정한다. 화면 없이 하이파이부터 그린다. 셀프 HTML과 의뢰 Figma를 같은 산출로 부른다.

실패는 보통 순서를 뒤집는 쪽에서 납니다. 예쁜 홈만 있고 글쓰기와 결제가 없으면, 미팅은 다시 처음으로 돌아가요.

자주 묻는 질문

클라비가 Figma를 대체하나요

대체하지 않습니다. 셀프 화면설계는 HTML이 본체입니다. Figma는 그다음에 붙여 넣는 경로예요. 의뢰는 처음부터 Figma를 넘깁니다. 도구가 디자인 툴을 삼키는 이야기가 아닙니다.

HTML을 보내면 팀 컴포넌트가 붙나요

붙지 않습니다. 캡처 후 붙여넣기입니다. 레이어는 생기지만, 팀 라이브러리와는 연결되지 않아요. 브랜드 파일을 이미 쓰고 있다면, 붙여 넣은 화면을 그 파일 규칙에 맞춰 다시 다듬는 일이 남습니다.

지금 흐름부터 고정하려면 기획 인터뷰로 가면 됩니다. HTML 화면의 실물은 화면설계와 화면설계 갤러리 글에, 맡기는 길은 밸류랩스 소개에 있습니다. 이야기는 상담으로 이어집니다. 이 글은 성공담 모음이 아니라 정찰 기록입니다. 아이디어 한 줄이면 시작됩니다.