숙명여대 솔룩스 ([30기 1차 세미나] (5) 디자인 시스템 가이드 세미나)

1차 세미나의 마지막 주제는 SOLUX 디자인 부원들을 대상으로 진행된 디자인 시스템 가이드 세미나였습니다.

그 어느 때보다 알찬 구성으로 진행되었던 이번 세미나, 마지막 주제에서는 어떤 내용이 다뤄졌을지 함께 확인해 볼까요?

3월 17일 (월) ~ 3월 31일 (월)

김정인 멘토님께서 진행해 주신 디자인 시스템 가이드 세미나에서는

디자인 시스템의 기초부터 실전 구축 방법, 그리고 SOLUX 디자이너로서 알아야 할 주의사항까지 폭넓게 다루었습니다.

디자인 시스템은 프로덕트의 목적에 맞는 디자인을 일관성 있게 적용할 수 있도록 팀 내에서 정의한 규칙으로 웹, 앱 또는 서비스 디자인에 적용된 디자인의 규칙이나 모든 가이드라인을 포함합니다.

디자인 시스템은 일관성을 유지하고, 생산성을 향상시키며, 협업 효율을 증가시킵니다.

잘 설계된 컬러 시스템은 일관된 UI 경험을 제공하고, 접근성을 높이며, 디자인과 개발의 효율을 극대화합니다.

컬러 시스템은 기본 컬러, 보조 컬러, 중립 컬러, 상태 컬러로 구성됩니다. 이 중 기본 컬러는 브랜드를 대표하는 메인 컬러로 UI 구성 요소 중에서 가장 중요한 버튼, 링크, 강조 요소 등에 사용됩니다.

타이포그래피는 텍스트를 구성하는 핵심 디자인 요소로, 가독성과 사용자 경험에 큰 영향을 미칩니다. 이때 텍스트의 계층 구조를 명확히 설정하는 것이 중요합니다.

아이콘은 사용자에게 정보를 직관적으로 전달하는 시각적 언어로, 빠르고 정확한 UI 이해를 돕기 위해 명확한 의미 전달을 중심으로 디자인되어야 합니다.

더 나아가, Google의 Material Design, Apple의 Human Interface Guidelines, IBM의 Design Language 등 주요 기업들의 대표적인 디자인 시스템 사례도 함께 살펴보았습니다.

섹션 2에서는 개발 프로젝트에서 디자이너로서 주의해야 할 사항들을 살펴보았습니다.

첫 번째는 디자인의 일관성 유지로, 색상 코드나 폰트 스타일 등을 명확히 문서화하여 개발자가 혼동하지 않도록 해야 합니다.

두 번째는 개발 가능성을 고려하는 것으로, 다양한 화면 크기에 대응할 수 있도록 유연하게 디자인하고, 복잡한 애니메이션은 최소화하는 것이 좋습니다. 이 외에도 개발팀과의 활발한 커뮤니케이션, 디자인 핸드오프 시 명확한 자료 제공 등이 중요합니다.

섹션 3에서는 폰트 스타일과 컬러 스타일 등록, 버튼 및 아이콘 컴포넌트 제작, 그리드 설정 및 화면 따라 그리기 등 다양한 피그마 실습을 진행하였습니다.

UI 구성 요소들을 하나씩 직접 등록하며 디자인 시스템을 구축해보고, 이를 활용해 실제 서비스처럼 보이는 화면 UI를 디자인해보는 시간을 가졌습니다.

세미나에서 배운 이론을 바로 실습으로 연결해보며 실전 감각을 익힐 수 있는 유익한 시간이었습니다.

- 디자인 시스템을 활용해 트래블월렛 '본인인증' 화면 따라 그리기

이번 과제는 디자인 시스템을 활용해 트래블월렛의 '본인인증' 화면을 따라 그리는 것이었습니다.

SOLUX 디자인 부원들은 세미나에서 연습하고 등록한 디자인 시스템을 바탕으로, 인증 항목이 선택된 버전과 선택되지 않은 버전 모두를 성실히 구현해 과제를 제출해 주셨습니다.

디자인 시스템에 대한 이해도를 높이고, UI 디자인을 체계적으로 익힐 수 있었던 유익한 시간이었습니다.

이번 세미나를 통해 쌓은 깊이 있는 디자인 감각으로 SOLUX의 프로젝트들이 더욱 멋지게 완성되길 진심으로 응원합니다! ✨

[30기 1차 세미나] (5) 디자인 시스템 가이드 세미나