UX/UI 디자인, 처음 이해하기
디자인에는 정답이 없다고 생각했다. 하지만 막상 들여다보니, 생각보다 규율이나 규칙처럼 세밀하게 정해진 가이드라인이 존재했다. 아마 개발자, 사용자, 디자이너 간의 암묵적인 룰과도 같은 느낌이었다.
다른 OS와 비교해보면 비슷한 부분도 있고, 다른 부분도 많았다. 결국 각 플랫폼이나 서비스 패턴에 맞춰 가이드라인을 어느 정도 준수해야 한다는 것을 느꼈다. 애플, 구글, 대한민국 정부 시스템 등, 각 조직에서 서비스 특성에 맞는 가이드라인과 디자인 리소스를 제공하고 있었다.
오늘은 처음으로 Material Design 3 가이드라인을 살펴봤다. 그 꼼꼼함에 놀랐고, 비전공자인 나에게는
“이런 관점과 의도로 디테일을 살리는구나”라는 것을 많이 느낄 수 있는 시간이었다.
사실 하루 종일 거의 이 가이드라인을 이해하려고 시간을 쓴 것 같다.
무엇보다 빠르게 변화하는 시대에 발맞추려면 영어는 필수라는 점도 크게 느꼈다.
일단 오늘 배운 기본적인 걸 간단하게 정리해보겠다.
개념 중심으로 이해하기
앱을 만든다는 것은 단순히 화면 몇 개를 그리는 일이 아니다.
핵심은 사용자 경험(UX)과 목표 달성이다.
즉, “왜 이 앱을 만들까?” “사용자는 어떻게 쓰게 될까?” “무엇을 제공해야 하는가?”
이 세 가지 질문에서 모든 설계와 개발의 기준이 나온다.
앱 개발은 기획 → 디자인 → 개발 → QA → 배포 과정을 거친다. 하지만 한 번에 완벽한 앱을 만들 수 없다. 시장 반응을 관찰하며 가설을 세우고, 검증하며 개선하는 반복이 필수다.
이 과정에서 PMF(Product-Market Fit) 를 찾는 것이 목표다.
Layout
앱의 화면은 정보와 기능을 사용자가 이해하고 사용할 수 있도록 논리적으로 배치해야 한다.
여기서 중요한 것이 그리드 시스템(Grid System) 이다.
그리드 시스템은 화면을 눈에 보이지 않는 Column,Gutter, Margin으로 나누어, 요소를 규칙적으로 배치하게 해준다.
컬럼(Column): 실제 콘텐츠가 들어가는 영역
거터(Gutter): 컬럼 사이 간격, 시각적 분리를 담당
마진(Margin): 화면 가장자리 여백, 여유와 균형 제공
그리드를 활용하면 시각적 일관성이 생기고, 예측 가능한 UI 구조를 만들 수 있다.
또한 디자이너와 개발자가 공통 기준을 가지게 되어 협업 효율이 높아지고, 유지보수 시에도 편리하다.
좁은 화면에서는 그리드만으로 충분하지 않을 때, 가로 스크롤을 통해 정보 확장을 제공할 수 있다. 이때 중요한 것은 사용자가 스크롤을 자연스럽게 인지하도록 설계하는 것이다.
Color
컬러는 단순한 장식이 아니라 정보 전달과 사용자 경험의 핵심 요소다.
색상은 사용자의 시선을 유도하고, 중요한 정보나 행동을 강조하며, 브랜드 정체성을 드러낸다.
Primary Color: 브랜드 아이덴티티, 가장 큰 면적과 강조점에서 사용
Secondary Color: 보조 색상, 정보 구분과 시각적 대비 제공
Neutrals: 배경·텍스트 등 큰 면적에 사용되는 무채색, 콘텐츠를 돋보이게 하는 역할
Semantic Color: 상태와 의미를 전달(성공, 경고, 오류 등)
중요한 것은 색의 비율과 배치다. 예를 들어 70:25:5 법칙처럼 주조색·보조색·포인트 색을 적절히 혼합하면 시각적 조화와 집중도를 동시에 확보할 수 있다.
콘텐츠 중심 서비스라면 화면에서 색상이 주인공이 되지 않도록 주의해야 하며, 한 화면에 하나의 Primary Color만 사용하는 것이 원칙이다.
Icon
아이콘은 시각적 기호로서 한 장의 그림으로 정보를 전달한다.
효과적인 아이콘은 다음 조건을 갖춘다.
직관적이며, 의미가 명확하다.
스타일이 통일되어 있어 시각적 혼란이 없다.
단순하면서도 필요한 시각적 요소를 유지한다.
규격과 보정을 통해 화면에서 균형 있게 보인다.
아이콘 디자인은 정보 전달과 UI 효율을 동시에 고려해야 한다.
Typography
텍스트는 화면에서 가장 많이 사용되는 요소다. 단순히 글씨를 보여주는 것이 아니라, 정보의 구조와 중요도를 표현하는 수단이다.
서체 종류, 크기, 굵기, 행간, 색상은 모두 사용성과 가독성에 직결된다.
위계 구조를 명확히 하여 사용자가 정보를 빠르게 이해하도록 돕는다.
접근성을 고려해 충분한 대비와 최소 글자 크기를 준수한다.
다국어 지원 시 언어별 표준 서체와 문화적 맥락을 이해해야 한다.
고려사항 - 위계 구조 표현 / 가독성 / 유효성 검사 충족된 크기, 대비 활용(접근성) / 컬러의 대비
타이포그래피는 단순한 디자인 요소가 아니라 정보 설계의 핵심이다.
Graphic
그래픽은 사용자의 시선을 집중시키고, 정보 계층을 보여주며, 추가 설명 역할을 한다.
시선 유도(클릭 유도) / 위계구조 및 그룹핑 / 보조설명
사진, 2D/3D 그래픽, 영상, 모션 그래픽 등 표현 방식은 다양하다.
하지만 중요한 것은 목적 중심이라는 점이다. 단순 장식이라면 콘텐츠 집중을 방해할 수 있다.
Touch and Gesture
모바일 환경에서는 터치 타겟과 제스처가 경험 품질을 결정한다.
터치 타겟은 충분한 크기와 여유를 제공해야 하고, Thumb Zone을 고려해 배치해야 한다.
탭, 스크롤, 핀치, 드래그 등 제스처는 직관적이어야 한다.
제스처만으로 중요한 기능을 숨기면 안 된다.
디바이스의 스크린 화면 크기도 고려
제스처의 종류: 탭 / 더블 탭 / 롱프레스 / 스크롤 / 핀치 / 드래그
사용자가 기대한 대로 앱이 반응해야 신뢰와 편의성이 유지된다.
Navigation
앱 내 내비게이션은 사용자가 목적에 도달하도록 돕는 길잡이다.
흐름도(Flow Chart)를 통해 이동 경로를 설계하지 않으면 사용자는 금세 길을 잃는다.
iOS 기준으로 Navigation Bar, Segmented Control, Tab Bar 등이 대표적이다.
좋은 내비게이션은 최소한의 단계, 명확한 라벨, 직관적 흐름을 가진다.
State
앱은 다양한 상태를 가진다.
버튼 하나에도 기본, 눌림, 비활성화 상태가 있다.
페이지 단위에는 데이터가 없는 Empty State가 있다.
앱 단위에서는 서버 오류 같은 시스템 상태가 있다.
상태를 세심하게 설계하면 사용자는 혼란을 덜 느끼고 앱에 대한 신뢰가 높아진다.
제가 생각한 것 보다 훨씬 더 디테일하고 많은 검증을 거쳐서 디자인이라는 것이 완성된다는 걸 많이 느꼈습니다. 이게 디자인의 개념에 아주 작은 일부일 뿐이겠지만 그래도 어떤 생각과 의도를 가지고 만들려고 하는지 또 다른 입장에서 생각해 보게 되네요!!
