계속해서 나타나는 티켓: "이 사이트처럼 만들어 주세요"

당신도 그 티켓을 알고 있을 것입니다. 매 스프린트(sprint)마다, 때로는 PM으로부터, 때로는 창업자로부터 도착하곤 하죠:

"저기, Company X가 가격 페이지를 만든 방식이 정말 마음에 들어요. 다음 주 출시를 위해 우리도 비슷하게 만들 수 있을까요?"

또는 조금 더 나쁜 버전도 있습니다:

"이 프로젝트에는 디자이너가 없어요. 그냥 이 경쟁사 사이트의 스타일을 따라 하세요."

8개월 전, 이 티켓에 대한 저의 답변은 항상 같았습니다. 레퍼런스 사이트를 엽니다. 개발자 도구(DevTools)를 엽니다. 복사를 시작합니다.

Elements 패널 → nav 선택 → Computed
→ padding: 16px 24px
→ background: #1a1a2e
→ font-size: 14px
→ font-weight: 500
복사. 모든 섹션에 대해 반복합니다. 호버 상태(hover states)를 확인합니다:

→ box-shadow: 0 4px 12px rgba(0,0,0,0.1)
→ transform: translateY(-2px)
→ transition: all 0.3s ease
그다음 VSCode로 돌아갑니다. CSS를 작성합니다. 브라우저로 전환합니다. 24px이 적절해 보이는지 확인합니다. 다시 전환합니다. "잠깐, 버튼의 radius가 8px이었나, 12px이었나?" 다시 브라우저로 전환합니다. 다시 확인합니다.

한 시간 뒤에, 아마 두 개의 섹션 정도가 완성되었을 것입니다. 그리고 비즈니스 로직(business logic)은 시작조차 하지 못한 상태죠.

이것은 사람들이 프론트엔드 개발(frontend development)을 설명할 때 아무도 말하지 않는 부분입니다. 다른 사람의 사이트를 쳐다보며 눈에 보이는 것을 코드로 수동으로 번역하는 데 소비되는 엄청난 시간 말입니다. 그것은 힘든 작업이 아닙니다. 지루한 작업입니다. 그리고 영원히 걸립니다.

디자이너가 제 책상을 지나갔습니다
지난달, 같은 티켓, 다른 프로젝트였습니다. 이번에는 랜딩 페이지(landing page)였습니다. 사용 가능한 디자이너가 없었습니다. PM은 경쟁사 페이지의 링크를 보냈습니다.

제가 이미 DevTools를 사용하고 있을 때, 다른 팀의 디자이너가 제 책상 옆을 지나갔습니다.

"뭐 하고 계세요?"

"이 사이트에서 스타일을 복사하고 있어요."

"그냥 Figma로 가져와서 한꺼번에 보는 건 어때요?"

"저는 Figma를 잘 사용하지 않아서요."

"그럴 필요 없어요. 그냥 확장 프로그램(extension)을 설치하세요."

그는 저에게 두 가지를 설정해 주었습니다:

DrawFlare에서 만든 "Web to Design"이라는 Chrome 확장 프로그램입니다. 어떤 페이지에서든 확장 프로그램 아이콘을 클릭하면, 전체 페이지(또는 선택한 섹션)를 .w2d 파일로 내보냅니다. 약 2초 정도 걸립니다.

"Web to Design"이라고도 불리는 Figma 플러그인도 있습니다. Figma를 열고, 플러그인을 실행한 뒤, .w2d 파일을 가져오기(import) 하세요. 모든 것이 편집 가능한 레이어 (layers)로 나타납니다.

나는 몇 초 동안 화면을 멍하니 바라보았습니다. 감명 깊어서가 아니었습니다. 이 도구를 사용하면 약 7초면 끝날 작업을 위해 지난 한 시간 동안 매달려 있었기 때문입니다.

프론트엔드 개발자에게 이것이 실제로 의미하는 바
나는 이것을 약 3주 동안 사용해 왔습니다. 디자이너의 관점이 아닌, 개발자의 관점에서 유용하다고 느낀 점들은 다음과 같습니다.

간격 (Spacing)이 즉시 눈에 보입니다.

참조 페이지를 볼 때 가장 맞추기 어려운 것이 간격입니다. 마진 (Margins), 패딩 (paddings), 카드 사이의 간격 (gaps) 등 말이죠. 개발자 도구 (DevTools)에서는 요소를 하나씩 검사하여 마진을 확인하고, 또 다른 요소를 검사하여 패딩을 확인한 뒤, 머릿속으로 전체 공간을 계산해야 합니다.

Figma 파일에서는 두 요소를 선택하기만 하면 거리를 확인할 수 있습니다. 카드 영역의 패딩은 24px, 테두리 반경 (border-radius)은 12px, 카드 사이의 간격 (gap)은 20px. 암산이 필요 없습니다.

컬러 시스템 추출 (Color system extraction).

보통 전체 컬러 팔레트 (color palette)를 찾으려면 15개의 서로 다른 요소를 일일이 클릭해야 합니다. Figma에서는 레이어 속성 (layer properties) 패널에 색상이 바로 나타나 있습니다. 이를 복사하여 CSS 변수 (CSS variables)로 변환하면 됩니다.

css
:root {
—primary: #4F46E5;
—secondary: #818CF8;
—text-primary: #1F2937;
—text-secondary: #6B7280;
—bg-surface: #FFFFFF;
—bg-page: #F9FAFB;
}
45분이 아니라 5분이면 충분합니다.

타이포그래피 계층 구조 (Typography hierarchy).

H1이 32px인가요, 아니면 36px인가요? 본문 (body) 크기는 얼마인가요? 설명 텍스트의 줄 높이 (line-height)는 얼마나 되나요? 개발자 도구 (DevTools)에서는 각각을 따로 확인해야 했습니다. Figma에서는 텍스트 레이어 (text layer)를 클릭하기만 하면 글꼴 크기 (font size), 굵기 (weight), 줄 높이 (line height), 자간 (letter spacing)이 한눈에 보입니다.

구체적인 예시
내가 작업하던 랜딩 페이지에는 세 개의 단계별 카드가 가로로 나열된 "작동 방식 (how it works)" 섹션이 있었습니다. 각 카드는 아이콘이 포함된 둥근 컨테이너, 제목, 설명, 그리고 하단의 은은한 보조 버튼 (secondary button)으로 구성되어 있었습니다.

기존 방식:

DevTools에서 첫 번째 카드를 선택 → 모든 패딩 (padding), 테두리 곡률 (border-radius), 그림자 (shadow) 값 확인
두 번째 카드를 선택 → 카드 사이의 간격 (spacing)이 단일 요소에서는 보이지 않는다는 것을 깨달음 → 부모 컨테이너 (parent container)로 전환 → 간격 (gap) 또는 마진 (margin) 확인
CSS 작성
브라우저로 전환 → 눈대중으로 조정
모바일 버전 작업 반복

Figma 파일을 사용할 경우:

카드 영역 선택 → 오토 레이아웃 (auto layout) 확인:
→ 패딩 (padding): 24px
→ 테두리 곡률 (border-radius): 12px
→ 간격 (gap): 20px
→ 동일한 너비의 열 (equal width columns) (1fr 1fr 1fr)

css
.steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.step-card {
padding: 24px;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

해당 섹션은 시작부터 끝까지 아마 15분 정도 걸렸을 것입니다. DevTools를 번갈아 가며 사용했다면 45분은 걸렸을 것입니다.

부족한 점 (솔직하게 말하자면)
3주가 지난 시점에서, 잘 작동하지 않는 것들은 다음과 같습니다:

애니메이션 (Animations). CSS 트랜지션 (transitions), 호버 효과 (hover effects), 키프레임 애니메이션 (keyframe animations). 이것들은 넘어오지 않습니다. 초기 상태는 내보내지지만, 움직임(motion)에 대해서는 스스로 해결해야 합니다. 솔직히 이건 괜찮습니다. 움직임은 어차피 제가 직접 결정하고 싶은 부분이니까요.

반응형 레이아웃 (Responsive layouts). 현재 설정된 뷰포트 너비 (viewport width)에 맞춰 페이지를 캡처합니다. 모바일 레이아웃은 별도로 캡처하거나 수동으로 조정해야 합니다. 저는 구조 참조를 위해 데스크톱 버전을 캡처하고, 모바일은 처음부터 직접 구축하고 있습니다.

이미지 품질 (Image quality). 웹 페이지는 압축된 WebP 이미지를 사용합니다. Figma에서는 흐릿하게 보일 것입니다. 저는 나중에 차원을 기록해 두고 깨끗한 에셋 (assets)을 찾아냅니다.

복잡한 JS 위젯 (Complex JS widgets). 드롭다운 (dropdowns), 모달 (modals), 데이트 피커 (date pickers). 이것들은 자바스크립트 상태 (JavaScript state)에 의존합니다. 플러그인은 초기 HTML 구조는 내보내지만, 상호작용 동작 (interaction behavior)은 전혀 내보내지 않습니다. 모든 것을 다 해낼 것이라고 기대할 수는 없습니다.

이러한 제한 사항들이 저를 크게 괴롭히지는 않습니다. 왜냐하면 이 도구가 해결하는 핵심 문제인 "이 페이지가 어떻게 생겼고 요소들 사이의 간격이 얼마나 되는가"라는 질문에 대해, 여전히 몇 시간이 아닌 몇 초 만에 답을 얻을 수 있기 때문입니다.

현재 저의 워크플로 (workflow)
"이것처럼 만들어 주세요"라는 티켓을 받으면, 저는 다음과 같이 합니다:

티켓 수신 → 참고 URL 열기
→ 확장 프로그램 클릭 후 .w2d로 내보내기 (2초)
→ Figma에 가져오기 (5초)
→ Figma에서 레이아웃 스캔 (5분)
→ 색상, 간격, 타이포그래피 스케일 추출 → CSS 변수화
→ 코딩 시작
→ 작업하는 동안 시각적 참고 자료로 Figma를 열어두기
제가 더 빨리 CSS를 작성하게 된 것이 아닙니다. 속도는 그대로입니다. 단지 창의적인 가치가 전혀 없는 부분, 즉 시각적 정보를 수동으로 코드에 옮겨 적는 데 시간을 쓰는 것을 멈췄을 뿐입니다.

이것이 한 시간 절약 이상의 의미를 갖는 이유
'웹사이트를 참고해서 비슷한 것을 만들어 달라'라는 티켓은 사라지지 않을 것입니다. 이는 모든 프로젝트마다 디자이너가 없는 회사, 즉 대부분의 회사에 존재합니다.
문제는 DrawFlare 같은 도구 없이도 이 작업을 할 수 있느냐가 아닙니다. 물론 가능합니다. DevTools가 있습니다. 값을 수동으로 복사할 수도 있습니다. 저도 몇 년 동안 그렇게 했습니다.

진짜 문제는 그것이 시간 활용에 가장 좋은 방법인지 여부입니다. 저는 그렇지 않다고 결정했습니다. 예전에 수동 스타일 검사에 사용하던 그 한 시간이 이제는 실제로 코드 구조, 엣지 케이스(edge cases), 상호작용을 생각하는 데 쓰입니다.

아니면 때로는 제시간에 퇴근하는 데 쓰이기도 합니다.

이것이 당신의 삶을 바꿀 것이라고는 할 수 없습니다. 하지만 그 반복되는 티켓, 즉 '이 사이트처럼 보이게 만들어 달라'라는 요청에 대해서는 매번 약 한 시간을 절약해 줍니다. 만약 저처럼 이 티켓을 한 달에 2~3번 받게 된다면, 계산이 맞습니다.

어디서 찾을 수 있나요
Chrome 확장 프로그램: Chrome 웹 스토어에서 'Web to Design' (DrawFlare) 검색
Figma 플러그인: Figma 커뮤니티에서 'Web to Design' 검색
무료 등급(Free tier)은 월 10회 내보내기를 제공합니다. 대부분의 사람에게 충분합니다. 더 필요하다면, Pro는 월 $10입니다.