[](https://www.nhncloud.com/kr)
안녕하세요.
제로 트러스트 보안 모델을 기반으로 NHN Cloud 리소스에 안전하게 접속할 수 있도록 지원하는 [Cloud Access](https://www.nhncloud.com/kr/service/security/cloud-access)의 Windows 클라이언트를 개발하고 있는 앱서비스보안팀 정원희입니다.
Cloud Access Windows 클라이언트는 [WTL](https://wtl.sourceforge.io/)/Win32 기반 C++ 네이티브 UI로 개발되어 있습니다. 네이티브 UI는 OS 수준의 성능과 낮은 리소스 사용량, 시스템 API와의 직접적인 연동 등의 이점이 있어 보안 제품 특성에 적합하지만, 웹 프론트엔드처럼 디자인 토큰을 관리하는 성숙한 생태계가 갖춰져 있지 않아 디자인 시스템 적용에 별도의 접근이 필요했습니다.
이번 글에서는 이 문제를 해결하기 위해 Figma 디자인 가이드 PDF를 Claude Code에 전달하여 C++ 디자인 시스템 코드를 자동 생성한 경험을 공유하려고 합니다.
## 디자인 시스템이 왜 필요했나
본격적으로 들어가기 전에 디자인 시스템이 무엇인지 간단히 짚고 넘어가겠습니다. 디자인 시스템은 제품이나 서비스에서 일관된 UI/UX를 만들기 위해 색상, 타이포그래피, 컴포넌트 같은 구성 요소를 정의한 규칙 모음입니다. 웹 프론트엔드에서는 익숙한 개념이지만, C++ 네이티브 UI 개발에서는 다소 생소할 수 있습니다. 실제로 Windows C++ 개발 환경에서는 색상값, 폰트 크기 등 디자인 관련 값들을 `#define`으로 하나의 헤더 파일에 모아두는 경우가 많습니다.
디자인 시스템이 없으면 개발자가 UI를 구현할 때 매번 디자이너에게 "이 버튼 색상이 뭐였죠?"라고 물어보거나, Figma 화면을 열어서 색상값을 직접 확인해야 합니다. 개발자마다 조금씩 다르게 구현하게 되고, 나중에 디자인이 바뀌면 코드 전체를 수정해야 합니다. 아래는 디자인 시스템이 없을 때 발생할 수 있는 전형적인 사례입니다.
```cpp
// MainView.cpp
color = RGB(18, 93, 230);
// SettingsView.cpp
color = RGB(18, 92, 230); // 오타 - 93이 아닌 92
// LoginView.cpp
color = 0xE65D12; // BGR 순서로 작성
```
각 소스 파일에서 같은 색상을 개별적으로 정의하면 불일치와 오타가 발생하기 쉽습니다. 디자인 시스템이 코드로 정의되어 있으면 한 곳에서 정의하고 전체에서 참조하므로 이런 문제가 해결됩니다.
```cpp
// 모든 곳에서 동일하게
color = primary::_7; // #125DE6
```
"Accent 버튼 스타일로 적용해 주세요."라는 요청이 오면 `ApplyAccent()` 한 줄이면 되고, 색상이 바뀌더라도 토큰값만 수정하면 전체 앱에 반영됩니다. 디자이너와 개발자 사이의 커뮤니케이션도 훨씬 단순해집니다.
참고로 저희가 따르고 있는 디자인 시스템은 NHN Cloud Console 디자인 시스템으로, Figma에서 관리되고 있습니다.
### 디자인 토큰의 계층 구조
디자인 시스템에서 핵심이 되는 개념이 디자인 토큰입니다. 토큰은 보통 세 단계로 나뉩니다.
**프리미티브 토큰**은 `#125DE6` 같은 색상값 자체이고, **시맨틱 토큰