디자인을 HTML로 변환하는 방법과 개발 가이드

디자인을 HTML로 변환할 때는 레이아웃과 시각 요소를 코드로 옮기는 작업, 실제 서비스의 기능을 연결하는 작업을 구분해야 합니다. Pixso D2C는 디자인 레이어에서 코드를 생성하고 내보내는 과정을 돕습니다. 생성 결과를 바탕으로 개발자가 입력 처리, 데이터 연결, 접근성, 반응형 동작을 확인해 서비스에 적용합니다.

Pixso에서 UI를 설계하고 개발자와 공유할 때 문의 폼 한 화면부터 변환해 보세요. 화면 전체를 한꺼번에 내보내는 것보다 컴포넌트와 레이어가 코드에서 어떻게 표현되는지 파악하기 좋습니다.

1부. D2C란 무엇인가?

D2C는 'Design to Code'의 약자입니다. 프런트엔드 개발자를 위한 보조 도구로서, 디자인 구현 프로세스를 효과적으로 가속화하고 수동 프런트엔드 코딩에 드는 비용을 줄여줍니다.

Pixso D2C는 페이지의 레이어 레이아웃과 디자인 시스템 컴포넌트를 분석해 코드를 생성합니다. 공식 안내에서 소개하는 출력 형식은 React, Vue, HTML, ArkUI, Flutter입니다. 선택한 형식에 따라 설정과 생성 결과가 달라집니다.

픽소(Pixso)의 컴포넌트 기능이 지속적으로 강화됨에 따라, 실제 프로덕션 환경에서의 D2C 활용성이 크게 향상되었습니다. 이제 완성된 디자인 시스템의 통합을 지원하며, 컴포넌트 수준의 인식 및 코드 출력이 가능합니다.

1. 시각 구조의 코드 변환: 레이아웃과 스타일을 코드로 옮긴 뒤 실제 화면과 비교해 조정할 수 있습니다. 폰트, 콘텐츠 길이, 브라우저 환경에 따른 차이는 별도로 확인합니다.
2. 디자인 시스템 및 컴포넌트 인식 지원: 디자인 파일에서 스타일, 디자인 토큰 및 컴포넌트를 직접 식별하고 추출합니다.
3. 반복 입력 작업 보조: 생성된 코드를 출발점으로 활용하고, 프로젝트에 이미 있는 컴포넌트와 기능에 맞춰 통합합니다.

변환 전에 문의 폼의 구조부터 정리하기

예제 화면에는 이름, 이메일, 문의 내용, ‘문의 보내기’ 버튼이 있습니다. 입력 필드마다 레이블과 입력 영역을 묶고, 같은 형태의 입력 필드는 컴포넌트로 정리합니다. 레이어 이름도 ‘사각형 24’보다는 각 요소의 역할을 알아볼 수 있게 붙이세요. 그림자나 장식보다 구조가 분명해야 생성 결과를 개발자가 읽고 재사용하기 쉽습니다.

일반 상태와 이메일 형식 오류 상태를 각각 준비합니다. 오류 문구가 한 줄 더 생겼을 때 다음 필드와 버튼이 아래로 움직여야 한다면, 고정 좌표로 간격을 흉내 내기보다 그 관계가 드러나는 레이아웃을 사용하세요. 긴 문의 내용과 좁은 화면도 넣어 봅니다.

이 단계의 산출물은 동작하는 문의 접수 서비스가 아니라, 어떤 정보와 상태를 구현할지 보여 주는 화면입니다. 메시지를 어느 서버로 보내는지, 필수 항목을 어떻게 검사하는지, 중복 제출을 어떻게 막는지는 개발 구현에서 연결할 사항으로 구분합니다.

2부. 기능 액세스 및 모드 제한

D2C는 디자인 모드(Design Mode)와 개발 뷰(Dev View) 모두에서 사용할 수 있지만, 각각의 중점 분야가 다릅니다.

디자인 모드: 보기, 코드 생성 및 내보내기 기능을 제공합니다. 또한 "디자인 최적화" 기능을 사용하여 디자인 레이어를 수정할 수 있습니다.

개발자 모드: 보기, 코드 생성 및 내보내기 기능만 제공합니다.

1. 디자인 모드에서 액세스하기

2. 개발자 모드에서 액세스하기

3부. 코드 프레임워크 선택 및 설정

드롭다운 메뉴에서 코드 프레임워크를 선택하고 설정을 구성합니다. 사용 가능한 설정 옵션은 선택한 프레임워크에 따라 달라집니다.

스타일 추출: 디자인 파일에서 모든 스타일을 식별하고 추출하며, 코드 내에서 스타일 이름을 사용하여 가독성을 높입니다.

디자인 토큰 추출: 디자인 파일에서 모든 디자인 토큰을 식별하고 추출하며, 코드 내에서 디자인 토큰 이름을 사용합니다.

컴포넌트 추출: 디자인 파일 내의 컴포넌트를 식별하고 재사용 가능한 코드로 생성하며, 컴포넌트 이름을 사용하여 코드 가독성을 개선합니다.

클래스 이름 접두사 추가: 생성된 CSS 클래스 이름에 공통 접두사를 붙여 다른 스타일과 구분합니다. 기존 프로젝트의 이름과 겹치지 않는 접두사를 선택하고, 전역 스타일의 영향도 확인하세요.

페이지 레이아웃: 

반응형: 브라우저 창 너비가 변경될 때, 해당 레이아웃이 구성된 페이지 내의 모든 요소가 원래의 레이아웃 구조와 상대적 위치를 유지하려고 시도합니다.

단위: 생성된 코드에서 사용되는 측정 단위입니다.

명명 규칙: 파일 이름에 대해 두 가지 형식 옵션을 제공합니다.
Pascal Case: SamplePixsoFile
Kebab Case: sample-pixso-file

인터랙션 유형(HTML 전용):

단일 페이지 HTML: 모든 디자인 페이지 레이어를 하나의 HTML 파일로 통합하며, 픽소(Pixso)에서 생성된 대부분의 프로토타입 인터랙션을 구현합니다.
다중 페이지 HTML: 각 디자인 페이지에 대해 독립적인 HTML 파일을 생성하며, 기본적인 프로토타입 인터랙션만 구현합니다.

• 코드 프레임워크 선택

  

• 코드 설정 - React

  

• 코드 설정 - Vue

• 코드 설정 - HTML

  

• 코드 설정 - ArkUI

  

• 코드 설정 - Flutter

  

• 스타일 추출: 프로젝트 구조에서 common.css 파일을 선택하여 스타일 코드를 확인합니다.

  

• 디자인 토큰 추출: 프로젝트 구조에서 design tokens.css 파일을 선택하여 디자인 토큰 코드를 확인합니다.

  

• 컴포넌트 추출: 프로젝트 구조에서 component.css 파일을 선택하여 컴포넌트/인스턴스 코드를 확인합니다.

  

문의 폼에 맞는 출력 설정 고르기

HTML 결과의 구조를 먼저 살펴보려면 예제 문의 폼 한 화면으로 시작합니다. 기존 서비스가 React나 Vue를 사용한다면 그 프로젝트에 맞는 형식을 선택하고, 이미 쓰는 입력 컴포넌트와 연결할 부분을 개발자와 정하세요. 지원 목록에 있다는 이유만으로 프로젝트의 기술을 바꿀 필요는 없습니다.

단일 페이지와 다중 페이지 HTML의 차이는 파일 구성과 내보낸 인터랙션에 있습니다. 문의 폼 화면을 여러 HTML 파일로 나눴다고 해서 서버의 문의 저장이나 이메일 발송 기능이 생기는 것은 아닙니다. 프로토타입에서 확인한 화면 전환과 실제 제출 처리를 분리해 살펴보세요.

4부. 디자인 레이어 선택

코드를 생성하기 전에 먼저 대상 디자인 레이어를 선택해야 합니다.

방법 1: "프레임 선택"을 클릭하고 목록에서 레이어를 확인합니다.

방법 2: D2C 초기 인터페이스에서 대상 레이어를 드래그하여 선택(Marquee select)합니다.

1. "프레임 선택"을 클릭합니다.

2. D2C 초기 인터페이스에서 대상 레이어를 드래그하여 선택합니다.

   

5부. 생성된 코드 확인 및 내보내기

디자인이 확정되면 "다음, 코드 생성"을 클릭하여 코드 생성을 완료합니다.

생성 후 "프로젝트 구조" 및 "레이어 목록"에서 해당 코드 내용을 확인할 수 있으며, "보기"를 통해 변환된 모든 레이어의 이미지 에셋을 탐색할 수 있습니다.

코드 프레임워크를 조정하거나 설정을 수정해야 하는 경우, "재생성"을 클릭하여 코드를 다시 생성할 수 있습니다.

1. "다음, 코드 생성"을 클릭합니다.

   

2. 코드 확인: "프로젝트 구조" 및 "레이어 목록"에서 해당 코드 내용을 확인하고, "보기"를 통해 변환된 레이어의 이미지 에셋을 찾아볼 수 있습니다.

   

3. 참고: 단일 페이지 HTML 설정에서 여러 레이어를 코드로 변환할 때, 모든 레이어의 코드가 동일한 HTML 파일로 병합됩니다. 이 경우 레이어 목록을 통해 전환하면 해당 파일 내에서 일치하는 코드 블록을 찾아 강조 표시합니다.

   

4. 클릭하여 이미지 에셋을 확인합니다.

   

5. 코드 재생성: 코드 프레임워크를 조정하거나 설정을 수정하려면 "재생성"을 클릭하여 코드를 다시 생성할 수 있습니다.

   

6. 코드 내보내기: 모든 준비가 끝났습니다! [코드 패키지 다운로드]를 클릭하여 전체 코드 프로젝트 패키지를 내보내세요.

   

6부. 생성한 코드를 실제 문의 폼에 적용하기

다운로드 후에는 개발 환경에서 결과를 열고 같은 문의 내용을 입력해 봅니다. 디자인과 비슷해 보이는 것만으로 제출 기능까지 완성된 것은 아닙니다. 예제에서 남은 작업을 구체적으로 나누면 디자이너와 개발자가 서로 다른 완료 상태를 떠올리는 일을 줄일 수 있습니다.

코드를 수정한 뒤 디자인에서 다시 생성할 때는 수동으로 연결한 기능을 덮어쓰지 않도록 주의하세요. 새 출력은 기존 구현과 비교해 필요한 부분만 통합합니다. 디자인 파일에는 바뀐 레이블과 오류 상태를 반영하고, 개발 코드에는 실제 제출 동작을 유지하는 방식으로 두 결과를 함께 관리하세요.

문의 폼 한 화면에서 구조와 적용 방법을 이해한 뒤 관련 화면으로 범위를 넓히면, 어떤 작업을 D2C로 줄이고 어떤 작업을 직접 구현해야 하는지 분명해집니다.