디자이너가 아니어도 알아두면 좋은, 매일 쓰는 UI 디자인 원칙 10가지

 

회의실에서 "이 버튼 좀 더 눈에 띄게 해주세요", "화면이 너무 복잡해 보여요" 같은 말을 한 번쯤 들어본 적 있으실 거예요.

그런데 막상 왜 눈에 안 띄는지, 어떻게 덜 복잡하게 만들 수 있는지 설명하기는 쉽지 않습니다.

 

UI 디자인 원칙은 바로 이럴 때 쓰는 공통 언어예요. 이름은 거창해 보여도, 사실 매일 쓰는 앱과 웹사이트에 이미 다 들어 있는 상식에 가깝습니다. 디자이너는 물론이고 기획자, 개발자, 마케터까지 알아두면 시안 피드백이 훨씬 명확해지는 원칙 10가지를 하나씩 살펴볼게요.

 

사람의 시선은 정해진 길로 움직인다

1. F패턴 - 글이 많은 화면을 읽는 방식

 

채용 사이트에서 공고 목록을 볼 때를 떠올려 보세요.

맨 위 공고는 회사명부터 연봉, 근무지까지 꼼꼼히 읽지만, 아래로 갈수록 왼쪽 회사명만 슥슥 훑고 내려가게 됩니다.

시선이 지나간 자리를 이어 보면 알파벳 F 모양이 나오는데, 이것을 F패턴이라고 불러요.

 

그래서 뉴스 목록, 게시판, 상품 리스트처럼 텍스트가 많은 화면에서는 각 줄의 앞부분이 가장 중요합니다. "[마감임박] 프론트엔드 개발자 채용"처럼 핵심 키워드를 제목 맨 앞에 두면, 대충 훑는 사용자도 놓치지 않고 잡아낼 수 있어요.

 

 

2. Z패턴 - 글이 적은 화면을 보는 방식

 

반대로 이벤트 페이지나 서비스 소개 랜딩 페이지처럼 글이 적고 시각 요소가 큰 화면에서는 시선이 Z자를 그립니다.

왼쪽 위 로고에서 시작해 오른쪽 위 메뉴로, 대각선으로 내려와 메인 문구를 지나 오른쪽 아래에서 끝나는 흐름이에요.

 

이 흐름의 마지막 지점이 바로 "사전 예약하기", "무료로 시작하기" 같은 행동 버튼이 들어갈 최적의 자리입니다. 시선이 자연스럽게 도착하는 곳에 버튼이 기다리고 있으면, 사용자는 고민 없이 다음 행동으로 넘어가게 되죠.

 

 

무엇을 먼저 보여줄지 정하는 원칙

3. 시각적 위계 - 읽는 순서를 디자인한다

 

모든 요소가 똑같은 크기와 굵기라면 사용자는 어디서부터 봐야 할지 몰라 헤매게 됩니다. 시각적 위계는 크기, 굵기, 색상, 위치를 조절해 "이것부터 보세요"라고 순서를 정해주는 원칙이에요.

 

송금 앱의 첫 화면을 생각해 보면 쉽습니다. 계좌 잔액은 가장 크고 굵게, 계좌 이름은 그보다 작게, 부가 정보는 연한 회색으로 처리되어 있죠.

 

실무에서 흔히 듣는 "로고도 크게, 제목도 크게, 버튼도 크게 해주세요"라는 요청이 위험한 이유도 여기에 있어요. 모든 게 강조되면 결국 아무것도 강조되지 않습니다. 화면마다 주인공은 하나만 정해 두는 게 좋아요.

 

 

4. 여백 - 비어 있는 공간도 디자인이다

 

"공간이 남는데 배너 하나 더 넣죠"라는 말, 실무에서 정말 자주 나옵니다. 하지만 여백은 남는 공간이 아니라 내용을 돋보이게 하는 재료예요. 요소 사이에 충분한 간격이 있어야 눈이 쉬어 가며 정보를 받아들일 수 있습니다.

 

빽빽한 전단지와 여유 있는 브랜드 매장 쇼윈도를 비교해 보면 차이가 확 느껴지죠. 여백을 넉넉히 쓰면 읽기 편해질 뿐만 아니라, 서비스 전체가 정돈되고 신뢰할 만한 인상을 주는 효과도 있어요.

 

 

사용자의 고민을 줄여주는 원칙

5. 힉의 법칙 - 선택지가 많을수록 결정은 느려진다

 

점심시간에 메뉴판이 열 장짜리인 식당에 가면 오히려 고르기가 더 힘들어집니다. 힉의 법칙은 선택지의 개수가 늘어날수록 결정하는 데 걸리는 시간도 함께 늘어난다는 원칙이에요.

 

배달앱이 첫 화면에 모든 가게를 한꺼번에 보여주지 않고 "치킨, 한식, 분식" 같은 카테고리부터 고르게 하는 것도 같은 이유입니다. 선택지를 단계로 나누거나, "가장 많이 찾는 메뉴"처럼 추천을 먼저 보여주면 사용자의 고민 시간이 크게 줄어들어요.

 

 

6. 점진적 공개 - 필요할 때 필요한 만큼만

 

회원가입 화면에 주소, 생년월일, 직업, 관심사까지 스무 칸이 한 번에 펼쳐져 있다면 대부분은 창을 닫아버릴 거예요. 점진적 공개는 꼭 필요한 정보만 먼저 보여주고, 나머지는 사용자가 원할 때 꺼내 볼 수 있게 숨겨두는 방식입니다.

 

"추가 정보 입력(선택)", "상세 옵션 더보기" 같은 접기·펼치기 버튼이 대표적인 예시예요. 처음 쓰는 사람은 부담 없이 시작할 수 있고, 익숙한 사람은 필요한 기능을 찾아 쓸 수 있으니 양쪽 모두 만족할 수 있습니다.

 

 

정보를 묶고 정리하는 원칙

7. 일관성 - 한 번 배우면 어디서든 통하게

 

어떤 화면에서는 "확인" 버튼이 파란색 네모인데, 다른 화면에서는 초록색 동그라미라면 어떨까요? 사용자는 매번 "이게 누르는 버튼이 맞나?" 하고 다시 확인하게 됩니다. 일관성은 같은 기능에는 같은 모양, 같은 색, 같은 위치를 쓰자는 원칙이에요.

 

여러 팀이 나눠서 화면을 만드는 회사일수록 이 부분이 쉽게 무너집니다. 그래서 요즘은 버튼, 입력창, 색상, 간격 규칙을 하나의 디자인 시스템으로 정리해 두고 모든 팀이 같이 쓰는 경우가 많아요. 사용자 입장에서는 배울 필요 없이 익숙하게 쓸 수 있는 화면이 됩니다.

 

 

8. 근접성의 법칙 - 가까이 있으면 한 묶음

 

사람의 눈은 서로 가까이 붙어 있는 요소를 자연스럽게 하나의 그룹으로 인식합니다. 게슈탈트 심리학에서 나온 근접성의 법칙이에요.

 

배송지 입력 폼을 예로 들면, "받는 분 이름"과 "연락처"는 가깝게 붙이고, "배송 주소" 묶음과는 간격을 넉넉히 띄우는 식입니다. 구분선이나 박스를 따로 그리지 않아도 간격만으로 정보가 깔끔하게 정리되죠. 반대로 입력칸의 라벨이 위아래 칸 사이 애매한 위치에 있으면 어느 칸의 설명인지 헷갈리게 되니 주의해야 해요.

 

 

9. 공통 영역의 법칙 - 같은 상자 안이면 같은 세트

 

테두리나 배경색으로 감싼 영역 안에 있는 요소들은 한 세트로 읽힙니다. 이것이 공통 영역의 법칙이고, 우리가 매일 보는 카드형 UI의 원리이기도 해요.

 

쇼핑몰 상품 목록에서 사진, 상품명, 가격, 장바구니 버튼이 하나의 카드에 담겨 있으면 "이 가격이 어느 상품 것인지" 헷갈릴 일이 없습니다. 요금제 비교 화면에서 추천 요금제만 배경색을 다르게 깔아주는 것도 같은 원리를 활용한 예시예요.

 

 

10. 인지 우선 원칙 - 외우게 하지 말고 보여주기

 

"지난주에 검색했던 그 카페 이름이 뭐였더라?" 하고 기억을 쥐어짜는 것보다, 최근 검색어 목록에서 보고 고르는 게 훨씬 쉽습니다. 사람은 무언가를 떠올리는 것(회상)보다 보고 알아보는 것(인지)을 훨씬 잘하거든요.

 

검색창의 자동완성, 최근 본 상품, 아이콘 옆에 붙은 텍스트 라벨이 모두 이 원칙에서 나온 장치예요. 사용자의 기억력에 기대지 말고, 필요한 단서를 화면에 미리 꺼내 두는 것이 친절한 UI의 기본입니다.

 

 

 

 

10가지 원칙을 정리해 보면 결국 하나의 질문으로 모입니다.

"사용자가 덜 생각하고도 원하는 걸 할 수 있는가?" 시선의 흐름을 따르고, 우선순위를 분명히 하고, 선택의 부담을 덜어주고, 정보를 보기 좋게 묶는 것 모두 이 질문에 대한 답이에요.

 

 

출처:

https://medium.com/@uiux.angel/ui-design-principles-you-actually-use-daily-9f3c6af7f468