나만의 디자인 시스템 만들기 : 실습 프로젝트

 

안녕하세요, 게으른 사부작이입니다!

 

오늘은 디자인 시스템 시리즈의 실습 시간으로, 나만의 디자인 시스템 만들기 프로젝트를 함께 해보려고 해요. 지금까지 디자인 시스템의 기초부터 미래 트렌드까지 알아봤으니, 이제 직접 만들어보면서 배운 걸 적용해 볼 차례예요. 저도 처음 디자인 시스템을 만들 때는 막막했지만, 하나씩 따라 하다 보니 점점 익숙해지더라고요. 오늘 실습에서는 컬러 5개, 버튼 3개, 텍스트 스타일 2개를 설계해 볼 거예요. 단계별로 차근차근 가이드를 드릴 테니, 여러분도 저와 함께 도전해 보세요! 그럼 시작해 볼까요?

 

ChatGPT 생성 이미지

 

이제 여러분 차례예요. 저도 같이 해볼게요!

디자인 시스템 시리즈를 진행하면서, "직접 만들어보고 싶다!"는 요청을 많이 받았어요. 이론만 배우는 것도 중요하지만, 실제로 만들어보면서 배우는 게 더 기억에 오래 남죠. 저도 디자인 시스템을 처음 만들 때 실습을 통해 많이 배웠던 기억이 나요. 처음엔 "어디서부터 시작해야 하지?" 하고 고민했지만, 하나씩 따라 하다 보니 나만의 시스템이 완성되더라고요. 오늘은 제가 여러분과 함께 실습을 진행하면서, 초보자도 쉽게 따라 할 수 있는 가이드를 준비해 봤어요. 실습 도구로는 무료 툴인 Figma를 사용할 거예요. Figma가 없으시다면 Canva나 다른 디자인 툴을 사용해도 괜찮아요. 준비되셨나요? 그럼 저와 함께 나만의 디자인 시스템을 만들어보는 여정을 시작해 볼게요!

실습 프로젝트: 컬러 5개, 버튼 3개, 텍스트 스타일 2개 설계

오늘 실습에서는 간단한 디자인 시스템을 만들어볼 거예요. 구성 요소는 컬러 5개, 버튼 3개, 텍스트 스타일 2개로, 제가 가상으로 만든 "커피숍 앱"을 주제로 진행해 볼게요. 커피숍 앱은 따뜻하고 친근한 느낌을 주고 싶어서, 그에 맞는 색상과 스타일을 설계해 볼게요. 단계별로 따라오시면 쉽게 완성할 수 있을 거예요!

1단계: 컬러 5개 설계

먼저, 디자인 시스템의 기본이 되는 컬러 팔레트를 만들어볼게요. 컬러는 UI의 분위기를 결정짓는 중요한 요소예요. 커피숍 앱에 어울리는 따뜻한 느낌의 컬러 5개를 선정해 볼게요. 저는 무료 툴인 Coolors를 사용해서 팔레트를 만들었어요.

컬러 팔레트:

• Primary: #8B4513 (커피 브라운) - 주요 버튼, 강조 요소에 사용. 따뜻한 느낌 전달.
• Secondary: #D2B48C (라떼 베이지) - 보조 버튼, 테두리에 사용. 부드러운 느낌.
• Accent: #FF6347 (토마토 레드) - 경고, 강조(예: 할인 태그)에 사용.
• Background: #FFF5E1 (크림 화이트) - 배경색. 따뜻하고 깔끔한 느낌.
• Text: #3C2F2F (다크 브라운) - 텍스트 색상. 가독성 높임.

실습 방법:

1. Figma에서 새 프로젝트를 만들고, 아트보드에 5개의 사각형을 그려요(각 100px x 100px).
2. 각 사각형에 위 컬러를 채우고, 색상 코드와 이름을 라벨로 붙여요. 예: "Primary: #8B4513".
3. Figma의 "Styles" 패널에서 각 색상을 스타일로 저장해요. (오른쪽 패널 → Fill → "+" 버튼 클릭 → 이름 지정).

저는 이 컬러 팔레트를 만들면서 커피숍의 따뜻한 분위기를 떠올렸어요. 여러분도 본인이 원하는 앱 테마에 맞게 컬러를 골라보세요. 예를 들어, 테크 앱이라면 시원한 파랑 계열을, 패션 앱이라면 화려한 색상을 선택하면 좋을 거예요.

2단계: 버튼 3개 설계

다음으로, 버튼 3개를 설계해 볼게요. 버튼은 사용자와의 상호작용에서 중요한 역할을 하죠. 커피숍 앱에 어울리는 버튼 스타일을 만들어볼게요.

 

버튼 스타일:

• Primary Button: 주요 행동(예: 주문하기)
  • 크기: 48px x 48px, 색상: Primary (#8B4513), 텍스트: "주문하기", 16px, Bold, 크림 화이트(#FFF5E1), 모서리 둥글기: 8px.
• Secondary Button: 보조 행동(예: 취소)
  • 크기: 48px x 48px, 색상: Secondary (#D2B48C), 텍스트: "취소", 16px, Regular, 다크 브라운(#3C2F2F), 모서리 둥글기: 8px.
• Warning Button: 경고 행동(예: 삭제)
  • 크기: 48px x 48px, 색상: Accent (#FF6347), 텍스트: "삭제", 16px, Bold, 흰색(#FFFFFF), 모서리 둥글기: 8px.

실습 방법:

1. Figma 아트보드에 48px x 48px 사각형 3개를 그려요.
2. 각 사각형에 위 색상을 채우고, 모서리를 8px로 둥글게 설정해요.
3. 텍스트를 추가하고, 지정된 폰트 스타일과 색상을 적용해요.
4. 각 버튼을 컴포넌트로 저장해요. (오른쪽 패널 → "Create Component" 버튼 클릭).
5. 버튼 옆에 라벨을 붙여요. 예: "Primary Button: 주문하기".

저는 버튼을 만들면서 "주문하기" 버튼에 커피 브라운 색상을 사용하니까 커피숍의 따뜻한 느낌이 잘 살아나더라고요. 여러분도 버튼 크기나 둥글기를 조정하면서 원하는 스타일을 찾아보세요!

3단계: 텍스트 스타일 2개 설계

마지막으로, 텍스트 스타일 2개를 설계해볼게요. 텍스트 스타일은 UI의 가독성과 분위기를 결정짓는 중요한 요소예요. 커피숍 앱에 어울리는 폰트를 골라볼게요. 저는 무료 폰트인 Noto Sans를 사용할 거예요.

텍스트 스타일:

• H1 (제목): Noto Sans Bold, 24px, 다크 브라운(#3C2F2F), 자간: 0.5px - 메인 제목에 사용.
• Body (본문): Noto Sans Regular, 16px, 다크 브라운(#3C2F2F), 자간: 0.2px - 본문 텍스트에 사용.

실습 방법:

1. Figma 아트보드에 두 개의 텍스트 박스를 만들어요.
2. 첫 번째 박스에 "커피숍 앱 제목"이라고 입력하고, H1 스타일(24px, Bold) 적용.
3. 두 번째 박스에 "커피를 주문해보세요!"라고 입력하고, Body 스타일(16px, Regular) 적용.
4. Figma의 "Text Styles" 패널에서 각 스타일을 저장해요. (오른쪽 패널 → Text → "+" 버튼 클릭 → 이름 지정).

저는 텍스트 스타일을 만들면서 다크 브라운 색상을 사용하니까 커피숍의 따뜻한 느낌과 잘 어울리더라고요. 여러분도 폰트나 색상을 바꿔가며 원하는 스타일을 찾아보세요.

4단계: 간단한 UI로 테스트

이제 설계한 요소를 간단한 UI에 적용해 볼게요. 커피숍 앱의 "주문 화면"을 만들어볼게요:

1. Figma 아트보드에 375px x 667px (모바일 크기) 사각형을 그려요.
2. 배경을 Background 컬러(#FFF5E1)로 채워요.
3. 상단에 "커피 주문"이라는 제목을 H1 스타일로 추가.
4. 중간에 "커피를 선택하세요"라는 본문을 Body 스타일로 추가.
5. 하단에 Primary Button("주문하기"), Secondary Button("취소"), Warning Button("삭제")를 배치.

이렇게 간단한 UI를 만들어보니, 컬러와 버튼, 텍스트 스타일이 조화를 이루면서 커피숍 앱의 따뜻한 느낌이 잘 전달되더라고요. 여러분도 설계한 요소를 UI에 적용해 보면서 느낌을 확인해 보세요.

실무 팁: 실습하며 배운 점

실습을 하면서 몇 가지 팁을 드릴게요. 먼저, 작게 시작하세요. 오늘처럼 컬러 5개, 버튼 3개로 시작해서 점차 늘려가면 부담이 적어요. 저는 처음엔 너무 많은 요소를 만들려다가 지쳤던 적이 많았어요.

또, 피드백을 받아보세요. UI를 완성한 후 친구나 동료에게 보여주고 "이 색상 따뜻해 보이나요?" 같은 질문을 해보세요. 저는 친구에게 피드백을 받아 "Warning 버튼이 너무 강렬하다"는 의견을 듣고 색상을 조금 부드럽게 조정했어요.

마지막으로, 문서화를 잊지 마세요. Notion이나 Figma에 "컬러: #8B4513, Primary Button: 주문하기" 같은 가이드를 정리해 놓으면 나중에 참고하기 좋아요. 저는 문서화를 안 했다가 "이 색상 코드 뭐였지?" 하고 헤맨 적이 많았어요.

완성했네요! 여러분의 결과물 보여주세요!

나만의 디자인 시스템을 만들어보니 정말 뿌듯하네요! 컬러 5개, 버튼 3개, 텍스트 스타일 2개를 설계하고, 간단한 UI까지 만들어보면서 디자인 시스템의 기본을 제대로 익힐 수 있었어요. 커피숍 앱 테마에 맞게 따뜻한 느낌을 살리려고 노력해 봤는데, 여러분은 어떤 테마로 만들어보셨나요? 저는 실습을 통해 "작게 시작하는 게 중요하다"는 걸 다시 한번 느꼈어요. 이제 여러분 차례예요! 만든 결과물을 캡처해서 댓글로 공유해 주시면 저도 같이 감상해 볼게요. 다음 포스트에서는 여러분의 디자인 시스템을 더 확장하는 방법을 다뤄볼게요. 실습 재미있게 하셨나요? 저는 여러분 결과물이 정말 기대돼요!