본문 바로가기

카테고리 없음

[UX/UI 디자인] 20. Design Library - Apple HIG / 대한민국 정부 KRDS

📅 2026.05.13(수) - 20일차

  • 요즘 상황은 기획자/디자이너/개발자 삼자대면 눈치게임 상태 (Mexican standoff) / 긴밀한 협업과 소통이 중요
  • [실습] 디자인 시스템 (Apple HIG나 KRDS)가져온 후, default / disabled 등 시나리오에 따라 잘 활용해보기!
  • [실습] Library를 publish해서 팀원끼리 공유할 수도 있음. (회사에서 그렇게 함)
  • [실습] 피그마 디자인 시스템 파일을 그대로 사용하지 말고, open한 후 복사해서 사용할 것을 권장함!

1. 주요 디자인 가이드라인

디자인 시스템이 너무 복잡하면 사용자가 헷갈림

기본적인 것을 만들어 놓고 근처에 예시를 여러개 만들어두는 것도 좋은 방법임!

2. 디자인의 '재료'와 공간감

디자인을 구성하는 물리적 개념인 '재료'에 대한 이해가 필요

  • Material Design & Flat Design: 구글의 머티리얼 디자인과 현대적인 플랫 디자인 특성 이해
    • Material Design은 화면속 UI를 실제 종이, 잉크, 표면, 그림자 처럼 이해하기 쉽게 만들자!
  • Liquid Glass (반투명성) / 글래스모피즘:
    • Material Design 유행이 어느정도 지난 후 (10년 정도..) 나오게 됨 
    • 배경의 콘텐츠가 비치는 반투명 효과를 사용하여 사용자에게 현재 위치에 대한 맥락(Context)을 유지하게 함.
    • 단순한 평면이 아닌 층(Layer)을 형성하여 화면에 공간감을 부여함.

3. 디자인 취향 기르기 (참고)

노암 촘스키

  • 사토 오오키 (nendo): 미니멀하면서도 위트 있는 디자인을 선보이는 일본의 디자인 스튜디오
  • The Tokyo Toilet: 유명 디자이너들이 참여한 공공시설 프로젝트

[실습] Apple HIG 에셋 활용 앱 제작

Figma 등 커뮤니티의 'iOS and iPad OS 26' Assets 활용하여 '개인 일기장' UI를 제작해보기

Tip: Apple HIG의 기본 컴포넌트(네비게이션 바, 탭 바, 버튼 스타일 등)를 에셋에서 찾아 적용해보기

일기앱 휘리릭 만들어보기 (초안)


[실습] KRDS 활용 웹 제작

KRDS에서 피그마로 불러온 디자인 시스템
실제 고용 24 화면 (스크린캡쳐)

 

KRDS 활용하여 피그마에서 제작해보기 실습