Pixso 디자인을 코드로: 프레임워크, 설정 및 내보내기

Pixso의 D2C(Design to Code)를 사용하면 디자인을 프런트엔드 코드로 변환할 수 있습니다. 레이아웃과 스타일을 처음부터 작성하는 반복 작업을 줄이고, 디자이너와 개발자가 같은 디자인을 기준으로 구현을 진행하도록 돕습니다. 생성된 코드는 구현의 출발점입니다. 실제 프로젝트에 적용할 때는 디자인 재현도뿐 아니라 데이터 연결과 필요한 동작도 확인해야 합니다.

안정적인 디자인 전달은 코드를 내보내기 전부터 시작됩니다. UI 디자인 협업 공간에서 각 결과물에 컴포넌트 상태, 토큰의 출처, 반응형 레이아웃 규칙, 담당자를 함께 기록하세요. 개발자가 확정된 설계 의도와 아직 검토 중인 부분을 구분할 수 있어야 합니다.

• 정상적으로 완료되는 흐름과 함께 로딩, 빈 데이터, 오류, 비활성화 상태를 동일한 컴포넌트 세트에 표시합니다.
• 간격과 타이포그래피 값이 일회성 덮어쓰기가 아니라 공유 스타일이나 디자인 토큰을 참조하는지 확인합니다.
• 생성된 코드가 인터랙션을 충분히 재현하지 못하는 경우에는 알려진 제약과 수작업으로 보완할 단계를 기록합니다.

I. D2C란 무엇인가요?

D2C는 Design to Code의 약자로, 디자인을 코드로 변환하는 기능입니다. 프런트엔드 개발자가 디자인을 구현하는 과정을 돕고, 코드를 직접 작성하는 시간과 작업 부담을 줄여 줍니다.

기존 D2C 패널은 Pixso 페이지에 있는 레이어의 레이아웃과 디자인 시스템 컴포넌트를 인식해 코드에 반영합니다. 원래 디자인의 세부 표현을 구현하는 데 도움이 되며, React, Vue, HTML, ArkUI, Flutter를 출력 대상으로 선택할 수 있습니다. 아래에서는 이 패널의 설정과 코드 내보내기 과정을 설명합니다.

Pixso의 컴포넌트 기능과 함께 사용하면 D2C를 실제 개발 과정에 적용하기가 수월해집니다. 디자인 시스템을 연동하고, 개별 컴포넌트를 인식해 해당 코드를 출력하는 방식도 지원합니다.

1. 디자인 세부 사항을 코드에 반영합니다. 레이아웃과 시각적 표현을 전달해 의도한 화면에 가깝게 구현하도록 돕습니다. 내보낸 화면이 원본 디자인과 일치하는지는 실제 구현 환경에서 확인해야 합니다.
2. 디자인 시스템과 컴포넌트를 인식합니다. 디자인 파일에서 스타일, 디자인 토큰, 컴포넌트를 식별하고 추출합니다.
3. 프런트엔드 코드 작성 부담을 줄입니다. 반복적인 수작업을 줄여 개발 주기를 단축하고, 더 빠르고 안정적인 전달을 돕습니다.

II. 이용 모드와 기능 차이

기존 D2C는 Design Mode(디자인 모드)와 Dev View(개발자 뷰)에서 모두 사용할 수 있습니다. 다만 이 패널에서 제공하는 작업 범위에는 다음과 같은 차이가 있습니다.

Design Mode: 코드 확인, 생성, 내보내기를 지원합니다. 또한 Optimize design(디자인 최적화) 기능으로 디자인 레이어를 수정할 수 있습니다.

Dev View: 이 패널에서는 코드 확인, 생성, 내보내기만 가능합니다. Design Mode처럼 Optimize design으로 디자인 레이어를 수정하는 작업은 포함되지 않습니다.

화면과 버전 안내: 아래 19장은 기존 D2C 패널의 영문 UI 화면입니다. 화면에서 버튼을 찾을 수 있도록 원래 이름과 한국어 설명을 함께 사용합니다. 현재의 D2C⁺는 Enterprise Dev View 기능으로, Enterprise Full-feature Seat 또는 Dev Seat와 기업 공간 안의 파일이 필요합니다. D2C⁺의 지원 프레임워크는 React, Vue, Flutter입니다. 기존 패널과 혼동하지 않도록 이용 조건은 D2C⁺ 시작 가이드(영문)에서 확인하세요.

1. Design Mode에서 D2C를 여는 화면입니다.

2. Dev View에서 D2C를 여는 화면입니다.

III. 프레임워크 선택과 코드 생성 설정

드롭다운 메뉴에서 출력할 프레임워크를 선택한 뒤 코드 생성 옵션을 설정합니다. 사용할 수 있는 설정 항목은 선택한 프레임워크에 따라 달라집니다.

스타일 추출(Extract styles): 디자인 파일에 정의된 스타일을 식별하고 추출합니다. 코드에서도 스타일 이름을 사용하므로 어떤 스타일을 참조하는지 파악하기 쉽습니다.

디자인 토큰 추출(Extract design tokens): 디자인 파일의 디자인 토큰을 식별하고 추출합니다. 코드에 토큰 이름을 사용해 각 값의 의미를 알아보기 쉽게 만듭니다.

컴포넌트 추출(Extract components): 디자인 파일의 컴포넌트를 식별하고 재사용 가능한 코드를 생성합니다. 코드에 컴포넌트 이름을 사용하므로 디자인과 코드의 대응 관계를 확인하기 쉽습니다.

클래스 이름 접두사(Prefix class names): 생성되는 모든 CSS 클래스 이름에 공통 접두사를 추가합니다. 프로젝트의 다른 스타일 라이브러리와 클래스 이름이 충돌하는 것을 방지하기 위한 설정입니다.

페이지 레이아웃(Page layout):

Responsive를 활성화하면 브라우저 창의 너비가 바뀔 때, 대응하는 레이아웃이 설정된 요소들이 원래 레이아웃 구조와 상대적인 위치 관계를 유지하도록 배치됩니다. 디자인 파일의 레이아웃 설정도 함께 확인하세요.

Unit에서는 생성된 코드에 사용할 치수 단위를 설정합니다. 아래 화면에서는 px 또는 rem을 선택할 수 있습니다.

명명 규칙(Naming convention): 파일 이름에 사용할 형식은 다음 두 가지입니다.
Pascal Case: SamplePixsoFile
Kebab Case: sample-pixso-file

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

Single HTML page는 디자인 페이지의 레이어를 하나의 HTML 파일로 통합합니다. 이 방식으로 Pixso에서 설정한 프로토타입 인터랙션의 상당 부분을 구현할 수 있습니다.
Multiple HTML pages는 디자인 페이지마다 별도의 HTML 파일을 생성합니다. 이 방식에서는 일부 기본적인 프로토타입 인터랙션만 구현할 수 있습니다.

• 코드를 출력할 프레임워크를 선택합니다.

  

• React 코드 설정 화면입니다. 언어, 빌드 도구, 스타일 형식 등을 선택합니다.

  

• Vue 코드 설정 화면입니다. 사용할 언어와 스타일 형식 등을 지정합니다.

• HTML 코드 설정 화면입니다. 스타일 추출, 레이아웃, 인터랙션 유형 등을 선택합니다.

  

• ArkUI 코드 설정 화면입니다. 아래 예시에는 스타일 추출 설정이 표시되어 있습니다.

  

• Flutter 코드 설정 화면입니다. 아래 예시에는 컴포넌트 추출 설정이 표시되어 있습니다.

  

• 추출된 스타일을 확인하려면 Project structure(프로젝트 구조)에서 common.css 파일을 선택합니다. 해당 파일의 스타일 정의가 코드 영역에 표시됩니다.

  

• 추출된 디자인 토큰을 확인하려면 Project structure에서 토큰이 모인 CSS 파일을 선택합니다. 아래 화면에서는 variables.css가 해당 파일이며, 토큰에 대응하는 변수 정의를 확인할 수 있습니다.

  

• 추출된 컴포넌트를 확인하려면 Project structure에서 해당 컴포넌트의 CSS 파일을 선택합니다. 아래 화면에서는 Component23729.css를 열어 컴포넌트와 인스턴스에 대응하는 코드를 확인합니다.

  

IV. 코드로 변환할 레이어 선택

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

방법 1: Select frame(프레임 선택)을 클릭하고, 목록에서 변환할 레이어를 체크합니다.

방법 2: D2C의 초기 화면에서 드래그하여 선택 영역을 만들고, 그 안에 대상 레이어가 포함되도록 합니다.

1. Select frame을 클릭해 목록에서 레이어를 선택합니다.

2. D2C의 초기 화면에서 대상 레이어를 드래그로 영역 선택합니다.

   

V. 생성된 코드 확인과 내보내기

대상 디자인을 확인한 뒤 Next, generate code(다음: 코드 생성)를 클릭해 코드를 생성합니다.

생성이 끝나면 Project structure(프로젝트 구조)와 Layer list(레이어 목록)에서 해당 코드를 확인할 수 있습니다. 변환된 모든 레이어의 이미지 에셋을 보려면 View(보기)를 클릭합니다.

프레임워크나 설정을 변경하려면 Regenerate(다시 생성)를 클릭해 변경한 조건으로 코드를 새로 생성합니다.

1. Next, generate code를 클릭합니다.

   

2. 코드 확인: Project structure에서 프로젝트 파일을, Layer list에서 레이어에 대응하는 코드를 확인합니다. 변환된 모든 레이어의 이미지 에셋은 View에서 볼 수 있습니다.

   

3. 단일 HTML 파일로 출력할 때: Single HTML page 설정으로 여러 레이어를 변환하면 모든 레이어의 코드가 하나의 HTML 파일에 통합됩니다. 이 상태에서 Layer list의 선택을 바꾸면 파일 안에서 해당 레이어에 대응하는 코드 블록으로 이동하고, 그 부분이 강조 표시됩니다.

   

4. View를 클릭하면 변환된 레이어에 포함된 이미지 에셋을 확인할 수 있습니다.

   

5. 코드 다시 생성: 프레임워크나 설정을 바꾸려면 Regenerate를 클릭합니다. 변경된 설정을 반영해 코드를 다시 생성할 수 있습니다.

   

6. 코드 내보내기: 확인을 마쳤다면 화면의 Download code(코드 다운로드)를 클릭합니다. 생성된 전체 코드 프로젝트를 패키지로 내보낼 수 있습니다.

   

마무리

D2C는 개별 작업의 속도를 높이는 기능을 넘어, 디자인 시스템과 프런트엔드 구현을 연결하는 도구로 활용할 수 있습니다. 설정, 대상 레이어, 생성 결과를 차례로 확인하면 수작업과 개발 비용을 줄이면서 더 빠르고 일관된 UI 구현을 진행하기가 수월해집니다. 내보낸 코드를 실제 프로젝트에 통합한 뒤 데이터 연결, 권한, 업무에 필요한 동작을 구현하고 테스트하여 전달을 마무리하세요.