시작하며

1년하고도 4개월이 걸린 디자인 시스템,
창작자로서 아무런 글 없이 넘어가기에는 너무 아까워 제작기와 비하인드 씬들을 써보려 합니다
제목은 JPEGMAFIA가 디럭스 앨범 겸 감독판 앨범을 낼 때 Director's Cut을 붙이는 것에서 영감을 받았습니다

2024년 1월 15일

처음 시작은 완전 다른 프로젝트였습니다,
Dask라고 부르는, Algorix에서 진행하던 협업 툴 프로젝트였는데, 여기에 쓰일 디자인 시스템 제작 겸
이 팀과 나가는 해커톤에서 쓰이는 라이브러리 등을 위해 겸사겸사 디자인 시스템 공부를 시작했습니다

2024년 1월 17일

이땐 WCAG, APCA 등 지금 알고 있는 개념도 몰랐고 시스템적인 디자인을 해본 것은 처음이라 굉장히 미숙합니다
그래서 당시에는 자세한 컬러 시스템보다, 의미론적인 (Semantic) 컬러 시스템을 두었다는 것에 의의를 두며 시작했습니다

서울역 패스트파이브에서 PM (대표), 프론트엔드, 보조 디자이너 (제 후배), 저
이렇게 4명이서 밤새면서 일정, 타임라인, 노트, 등 Dask의 주요 기능 페이지를 하루 안에 마감했던게 생각나네요
추억이 새록새록...

그러다 디자인 시스템을 잘 아시는 선배님과 말씀을 나누면서
디자인 토큰에 대한 개념, 컬러 접근성 (WCAG 3, APCA)를 알게 되었습니다 (여기서 APCA란 새로운 컬러 Contrast 체크 체계를 말합니다)

APCA, WCAG 3란?

기존의 WCAG 2 방식이라면 위 두 버튼은 모두 2.9 : 1의 명암비를 가지지만
이것은 수학적으로 계산된 수치일 뿐, 우리 눈이 받아들이는 결과는 계산하지 않았습니다 (인간의 눈은 색의 Hue, Saturation을 linear하게 받아들이진 않으니깐요)

그 외에 텍스트의 Weight, 크기를 고려하여 만들어진 새로운 색깔 접근성 계산 체계가 APCA입니다
이 APCA를 처음으로 도입하는게 WCAG 3이고요

2024년 1월 22일

Apple의 Human Interface Guideline과 Figma UI Kit을 참고하며
새로운 디자인 시스템 (정확히는 Foundation 부분만) 을 만들었습니다, Dask v2 (정식 릴리즈) 에 적용될 예정이었죠
Semantic 컬러 시스템을 만드려고 노력했고 특히 이때 투명도를 기반으로 컬러를 짜기 시작했습니다

투명도를 기반으로 컬러를 짜면 배경 색이 다른 색으로 바뀌면 위계가 뒤틀려버리는 아래의 텍스트와는 달리,
상단의 텍스트처럼 위계를 유지할 수 있습니다

2024년 1월 26일

HIG 기반으로 타이포그래피 체계도 짜고, 컬러 시스템도 마무리해서
Dask 팀원들과 출전하는 해커톤에서 테스트하고자 했습니다
인생네컷, 포토이즘 등 네 컷 사진 저장 서비스를 기획하며, 프로덕트에 해당 Foundation을 적용했습니다 (해커톤은 1등 했었습니다)
그러나 이를 기점으로 저 포함 팀원 전체가 번아웃이 와서 프로덕트를 만드는 것에 싫증이 나기도 했고,
제가 독감과 코로나가 같이 걸렸어서 쉴 겸 잠시 다른 프로젝트를 하러 갔습니다

2024년 2월 10일

친한 친구들이 있는 고등학교의 인트라넷 서비스에 디자인 및 React Native 자문으로 잠깐 참여했었고
3102의 Dynamic Text Scaling 기능에 큰 영향을 준 고찰을 이때 하게 되었습니다

당시 저는 아이폰 폰트 크기를 제일 작게 해두고 사용했는데요,
실제 앱을 제 아이폰에 띄워보니 폰트가 너무 작아보였습니다

처음 생각했던 방안은 무작정 모든 폰트 크기에 똑같은 값을 더하는 것이었는데,
지금 보니 온전한 해결법은 아니었습니다,
저때 폰트 크기에 대한 고민을 끝내지 못해 결국 폰트 크기를 강제로 잠가놨었습니다

2024년 2월 11일

아! 이때는 칸예의 벌쳐 1이 나왔어서
한창 벌쳐 1을 들으면서 작업했습니다

저는 디자인을 할 때, 지금 듣고 있는 음악에서 많은 영감을 얻고,
그 영감을 UI 디자인에 녹여내려고 합니다. 그게 단순히 묵업 속 텍스트가 되었던 디자인 속 철학이 되었건 말이죠
그래서 이 글 중간중간 마일스톤마다 당시 듣던 음악도 같이 남기겠습니다

2024년 2월 13일

좋은 컬러 팔레트, 유연한 폰트 크기 조절에 대한 고민을 남겨두고
잠시 개인 프로젝트를 작업하러 떠났습니다
이 글의 결과물인 The 3102와는 관련 없지만 잠깐 짤막하게 보여드리겠습니다

2021년부터 약 5번 정도를 엎으며 디자인한 음악 앱입니다
제일 좋아하는 익스페리멘탈 힙합 장르 (Death Grips, JPEGMAFIA, Injury Reserve, Kanye West - Yeezus)에 큰 영감을 받아
심플하고 과감한 (궁극적으로는 제 맘에 드는) 음악 앱을 디자인하는 것이 목표였습니다
지금도 현재 진행형입니다

2024년 5월 5일

다시 디자인 시스템으로 돌아와서, 방학 이후에 개학을 하며
학교 선배님이 하시는 스타트업에 디자인 리드로 입사하게 되었습니다
해당 스타트업의 새로운 클라이언트 디자인을 상당히 짧은 기간만에 끝내야 했어서,
Dask 시절에 만들어둔 Foundation 구조를 활용하기로 했습니다
이때부터 피그마의 Variable 기능을 적극적으로 활용했습니다

특히 피그마의 Variable을 활용하여
저시력자를 위해 텍스트 크기를 조정하는 기능을 이때 제작했습니다
당시에는 HIG를 기반으로 xSmall ~ xLarge + AX1, AX2를 만들었었는데
현재는 다듬고 다듬어져서 100% ~ 200%로 변했습니다

2024년 5월 29일

또한 이때 Atomic Design 방법론을 공부하면서, 컴포넌트를 조합 + Nested 형태로 관리하는 시도를 했는데
마감기한이 얼마 안 남은 만큼, Atom 단계 컴포넌트 (버튼, 제어, ...)만 빠르게 만들었습니다

2024년 6월 1일

중간중간 컴포넌트를 제작하며, 확장성 테스트를 진행했습니다
컴포넌트가 많이 없는 만큼, 모든 부분이 디자인 시스템으로 대체된건 아니고
컬러, 텍스트, 버튼 정도가 대체되었습니다

2024년 7월 22일 — 단아, 호랑에듀 디자인 라이브러리

큰 탈 없이 이 디자인 라이브러리를 7월 22일 피그마 커뮤니티에 공개했습니다
버전? 자체는 위 사진인 6월 23일에 멈춰있었는데요,
당시 엄청나게 방대한 디자인 토큰 & 디자인 시스템에 대한 지식을 새로 공부했는데, 기존의 구조와 너무 달라서 통합하기 어려워 이대로 공개했습니다

당시 호랑의 한글 코딩 가치관에 맞춰서,
한국 인디 밴드 노래 (특히 언발관, 혁오) 를 많이 들었고, 그 영향을 녹여내기도 했습니다

2024년 6월 4일

터졌던 Dask 프로젝트가 일부 인원 (저, 당시 PM) 만으로, 다른 회사에서 Coaster라는 다른 프로젝트로 잠시 이동된 적이 있습니다
Coaster에서 쓰일 디자인 라이브러리 겸, 단순히 컬러 시스템 + 일부 컴포넌트 격의 디자인 시스템이 아닌,
진짜 제대로 된 디자인 시스템을 만들어 보고 싶어서 Natural (당시 Saturation) 이라는 디자인 시스템을 새로 시작했습니다

2024년 6월 ??일

폰트, 쓰이는 사소한 컬러, 하나하나 신경 써서 배치했습니다,
특히 단아에서 아쉬웠던 부분인데, 한글 + 영어 조합으로 글자를 쓰면 Weight가 너무 달라 보여서, 이 부분에 주목하여 폰트 선정을 했습니다
그리고 이때부터 Primitive → Semantic의 2계층 구조를 접목하기 시작했습니다

시스템에서 자주 사용되는 컬러 값이 있다면, 먼저 Primitive 단에서 투명도/명암 별로 일괄 보정하여 등록합니다.

prim.solid.red100, prim.solid.red90 ... 이런 식으로 말이죠.

이후, 실질적으로 사용하는 컬러 토큰인 Semantic 계층에서

semantic.danger → prim.solid.red100

과 같은 참조 구조를 형성하는 것이 2계층 구조입니다.

2024년 7월 1일

컬러뿐만 아니라 텍스트, 코너 Radius 값까지 모든 요소를 토큰화하여
다른 토큰 (테마, 레이아웃, 텍스트)에서 참조하는 구조를 형성했습니다
특히 이때 다중 레이아웃 대응을 실험했었습니다

2024년 8월 5일

그리고 단아를 사용하면서 가장 불편했던 점이 아이콘 등 에셋 사용이었는데요,
피그마 컴포넌트 상 단순히 Variant로 처리되니 아이콘을 미리 프리뷰 할 수 없어 이름을 보고 감으로 때려맞춰야 했습니다,
종류도 너무 적기도 했고요

그래서 위 사진처럼 아이콘 종류를 각각의 컴포넌트로 처리한 후, 피그마의 Instance Swap을 활용했습니다
에셋 관리가 더 편해지고, 사용 전 프리뷰도 할 수 있고, 외부 아이콘도 바로 활용할 수 있다는 장점이 생겼습니다

2024년 8월 9일

또 다른 가장 큰 변화는 Leading/Trailing 도입입니다.
우리나라는 LTR 언어입니다, 왼쪽(Left)에서 오른쪽(Right)으로 글을 읽는다는 뜻인데요,
기존에는 아랍권과 같은 RTL 언어를 고려할 일이 없어 대부분이 Leading/Trailing이 아닌, Left/Right 프로퍼티를 사용했을 겁니다
Left Icon / Right Icon이라는 프로퍼티는 왼쪽, 오른쪽이라는 절대적인 값을 가집니다,
한국어에서 아랍어로 변경해도 아이콘의 위치가 왼쪽 & 오른쪽에 고정되겠지요?
보통 이러한 프로퍼티는 텍스트를 뒷받침하며, 문맥을 전달하기 때문에
위치가 고정되어버리면 매우 곤란합니다

따라서 Leading / Trailing 프로퍼티를 도입하며,
LTR / RTL 언어에 따라 프로퍼티의 위치를 고려할 수 있게끔 설계하였습니다
새로운 디자인 토큰 계층화, 다중 레이아웃 및 접근성 설계, LTR / RTL 언어권 고려,
3102의 핵심 기능들을 Natural 디자인 시스템에서 다졌었습니다
이 시스템을 Junction Asia 2024 해커톤에서 테스트했습니다

(나름대로 어필하려고 디자인하고 글도 썼는데, 재밌었습니다)

디자인 시스템을 짠 덕분에
기획 → 디자인 과정 사이에서 헤맬 일이 없었고, 더 촘촘하게 기획을 할 수 있었습니다
특히, 저희 주제 평가 요소 중 하나에 "Human Interface Guideline" (literally)가 있었기 때문에,
LTR/RTL, 컬러 테마, 접근성 등 다양한 요소를 적극적으로 어필했습니다

상은 못 받았지만 나름대로 만족했고
특히 기획 → 디자인 → 프론트엔드의 과정에서 디자인 시스템의 위력을 확인할 수 있었습니다

이때 제가 제일 좋아하는 래퍼, JPEGMAFIA의 새 정규가 나왔었는데
이 앨범의 실험적이면서도 대중적인 면에 영감을 받아 Natural에 녹여내려고 했었습니다
아직도 1번 트랙을 들으면 추억이 돌아 당시 Junction 경기장이 생각납니다

2024년 9월, 2학기

자연스럽게 시간은 9월 ~ 10월로 점프합니다
이때는 제 모교의 인트라넷 유지보수를 하고 있었는데요
특히, React Native 버전을 업데이트하며
2023년에 한 낡은 디자인을 최신 컴포넌트로 갈아끼는 작업이 절실했습니다

2023년 3월 — 디미고인 RN 리뉴얼

3102의 일부 컴포넌트는 2년 전부터 작업되어 있었습니다 ㅋㅋ

이때 한 디자인을 상당히 많이 다듬고, 최신 컴포넌트로 갈아꼈는데,
이때, 7월 22일에 릴리즈한 단아 디자인 라이브러리를 fork하여 시작했습니다
단아 디자인 라이브러리를 기반으로 모든 페이지를 새로 제작하고,
자주 쓰이는 컴포넌트를 새로 묶고, Atomic Design 방법론을 활용하여 새로 제작했습니다

2024년 10월 18일

해당 디자인 라이브러리의 이름을 Factory 94로 지었습니다
사세충열로 94 (당시 고등학교)의 공장, Factory 94 뭐 이런 뜻입니다
그리고 이것이 실질적인 The 3102의 시작입니다 (앨범 발매 전 선공개 싱글 느낌으로 보시면 됩니다)

RN 구현체까지 제가 만족하는 수준으로 너무 깔끔하게 나왔었습니다
하지만 공개적인 장소에서 말할 수 없는 사유로 기존 인트라넷 브랜딩 및 도메인을 못 쓰게 되어,
인트라넷 프로젝트를 다른 학교와 통합하여 진행했습니다

네, 맨 처음에 나온 다른 학교의 인트를 통합하였고, 이 브랜딩을 빌려 프로젝트 INT라는 이름 아래
Factory 94를 사용하게 되었습니다

브랜드가 여러개이기 때문에 (INT, 저희 학교, 다른 학교)
Natural에서 사용하던 2계층 구조를 가져와야 했고, 이 기세에 힘입어
Natural에서 작업했던 상당 부분의 요소를 도입했습니다, 사실상 다른 시스템이라고 봐도 무방할 정도로 Migration을 진행했습니다

(가끔 지인들이 The 3102는 단아를 계승하냐고 물어보는데, 실질적으로는 Natural을 계승한 겁니다)

2024년 11월 17일

이때 이름도 The 9433을 거쳐 The 3102로 확정했습니다 (1975 따라한 거 맞습니다)

Factory 94는 특정 학교의 브랜딩이 강하기 때문에 함부로 사용할 수 없다고 판단,
두 학교의 번지수를 냅다 곱했습니다
사실 이미 모든 컴포넌트가 Factory 94 때부터 알맞게 나왔기 때문에,
이를 잘 사용할 수 있도록 다듬고, 문서화를 어떻게 할지 고민하는데 초점을 맞췄습니다
이 과정에서 Base (Uber), Evo (eBay), Fluent 2 ... 등 정말 많은 디자인 시스템을 참고했습니다

2024년 12월 22일

이때 The 3102 테스트 겸 재미 겸 해커톤에 나가 확장성 테스트를 진행했습니다

디미고 친구들과 나가서 그런가 재미도 있었고, 2등 했어서 꽤 좋았습니다 (1등 못한게 아쉽긴 했지만)
초라했던 커버리지 테스트와는 다르게 거의 대부분의 컴포넌트를 The 3102를 이용해 제작했었습니다
신년이 되고 나서도 해커톤을 또 나가 테스트를 하기도 했고, 계속 프로젝트 INT의 디자인을 했습니다

2025년 1월 31일

INT의 각 모듈(급식, 일정, 학봉관) 등을 디자인 하면서
고칠 부분이 생기면 디자인 시스템을 수정해 고치고,
INT 디자인을 확정하는 단계를 거쳤습니다

특히 2023년 RN으로 학교 인트라넷을 리뉴얼 하면서 "Kinetic" 이라는 구조를 도입했었는데요,
현재 시간에 따라 홈화면에 뜨는 위젯이 변경되는 Smart Stack 같은 구조입니다
각 브랜드 별 모듈 사용 여부, 각 모듈 별 로컬 컴포넌트, Kinetic 위젯, 페이지 플로우 등
위 사진과 같은 방식으로 모듈을 관리해서 디자인을 완성했습니다
특히 이때 컬러 시스템에 큰 변화가 있었는데,
Content 계열의 무지성 Primary, Secondary, Tertiary ... 를 정형화했습니다
Base라는 컬러를 기준으로 이를 뒷받침하는, 부제목같은 Additive
추가적인 내용을 담는 Assistive, 비활성화 상태를 나타내는 Disabled
이 4가지 체계로 기존 Primary, Secondary ... 를 대체했습니다

2025년 3월 3일

되게 똑같아 보이지만 틈틈이 추가한 것들이 많습니다
개강하고 나서 안드로이드 네이티브 개발에 관심이 많아졌는데,

피그마의 Variable을 적극 활용해서
안드로이드와 iOS 네이티브 간 컴포넌트 스펙의 차이를 반영하고자 노력했습니다

2025년 4월 6일

친구에게 맡긴 3D 썸네일이 드디어 도착했고,
저도 이 1년간의 디자인 시스템 대장정을 마무리하기 시작했습니다

2025년 4월 10일 — The 3102 Design System

그렇게 1년 4개월간의 디자인 시스템 공부, 대장정 끝에
The 3102 디자인 시스템을 피그마 커뮤니티에 퍼블리싱했습니다
되게 자식새끼 떠나보내는 기분도 들고 아티스트들이 앨범을 내는게 이런 기분이구나 하는 생각도 들더라고요
반응도 좋고 친구들도 고생했다고 하고 기분 좋았습니다
디자인 시스템을 공부하시는 분들께 큰 도움이 되었으면 좋겠습니다

(The 3102 Design System은 제 Figma Community에서 클론하실 수 있습니다)

2025년 5월에서 전하는 마무리

아직 여기서 끝내고 싶진 않습니다 제가 공부하지 못한 부분도 더 많고 할 일도 많습니다
일단은 이 1년간의 대장정을 이렇게 급하게 마무리해봅니다
언제 다른 작품으로 돌아올진 모르겠지만, 다들 행복하세요!

2026년 5월에서 전하는 마무리

avanturation.com을 만들면서 꼭 옮겨오고 싶던 글 중 하나였는데요
제 개인 네이버 블로그에 올렸던 The 3102 비하인드 글을 이곳으로 옮겨왔습니다
원본 글에서 일부 내용은 덜어내고, 더 읽기 편하도록 문장과 구성을 다듬었습니다

The 3102는 개인적으로 애정이 컸던 프로젝트인 만큼, 이 공간에도 꼭 남겨두고 싶었습니다
썸네일은 5월 8일에 나온 Kid Milli & OKASHII - MAINSTREAM 앨범에서 영감받아 제작했습니다