강조 구성과 리듬 구성, 여백 구성으로 모바일 앱 화면 살리기
온라인 쇼핑몰의 상품 상세 화면을 만들던 민지는 중요한 내용을 모두 크게 표시했다. 할인율, 배송 안내, 구매 버튼, 후기 평점에 같은 색과 굵은 글씨를 썼다. 그런데 완성된 화면을 보니 무엇부터 봐야 할지 오히려 알기 어려웠다. 모든 요소가 소리치고 있으면 정작 중요한 정보가 눈에 들어오지 않는다.
이때 필요한 것이 강조 구성이다. 강조 구성은 특정 요소를 눈에 띄게 만드는 기술이지만, 단순히 크기나 색을 키우는 일이 아니다. 이 글을 읽으면 어디에 시선을 먼저 보낼지 정하고, 리듬·반복·균형·여백을 이용해 화면을 정돈하는 방법을 알게 된다. 웹페이지와 모바일 앱을 만들 때 바로 확인할 기준도 함께 살펴본다.
강조 구성은 시선을 안내하는 설계다
화면을 보는 사람의 눈은 모든 정보를 같은 순서로 읽지 않는다. 크기가 큰 제목, 대비가 강한 색, 주변이 비어 있는 버튼처럼 눈에 띄는 요소부터 살핀다. 따라서 강조 구성은 ‘무엇을 크게 만들까’보다 ‘사용자가 무엇을 먼저 알아야 할까’에서 시작해야 한다.
예를 들어 음식 배달 앱이라면 음식 사진, 메뉴 이름, 가격, 주문 버튼의 순서가 중요하다. 음식 사진만 지나치게 키우면 메뉴 이름과 가격을 찾는 데 시간이 걸린다. 반대로 주문 버튼만 튀게 만들면 사용자가 상품 내용을 충분히 확인하기 전에 눌러야 한다는 인상을 받을 수 있다.
강조의 단계는 보통 세 층으로 나누면 안정적이다. 첫째는 가장 먼저 보일 주 정보다. 둘째는 주 정보를 이해하는 데 필요한 보조 정보다. 셋째는 자세히 읽고 싶은 사람을 위한 세부 정보다. 모든 내용을 첫째 단계처럼 꾸미지 않는 것이 핵심이다.
작업 전에 확인할 체크리스트
- 이 화면에서 사용자가 가장 먼저 알아야 할 내용은 무엇인가?
- 강조 요소를 본 뒤 사용자가 해야 할 행동은 무엇인가?
- 제목, 본문, 버튼의 크기 차이가 충분히 느껴지는가?
- 색을 빼고 흑백으로 봐도 정보의 순서가 보이는가?
- 휴대전화의 좁은 화면에서도 중요한 내용이 위쪽에 남는가?
- 강조가 너무 많아 서로 경쟁하고 있지는 않은가?
기획 단계에서는 화면에 들어갈 문장을 먼저 주 정보와 보조 정보로 나눠 보자. 문장을 정리하지 않고 장식부터 더하면 강조 구성은 쉽게 복잡해진다. 특히 배너가 많은 웹페이지에서는 할인 문구마다 다른 색을 쓰기보다, 한 가지 기준을 정해 같은 역할의 정보에 같은 표현을 사용하는 편이 낫다.
리듬·반복·균형·여백은 어떻게 다를까
리듬 구성은 시선이 화면을 이동하는 흐름을 만드는 방식이다. 큰 제목 다음에 짧은 설명, 그다음 이미지와 버튼이 이어지면 사용자는 화면의 읽는 순서를 자연스럽게 느낀다. 같은 크기의 상자만 길게 놓는 화면보다 크기와 간격에 변화가 있는 화면이 덜 답답하다.
반복 구성은 같은 역할을 하는 요소를 비슷한 모습으로 묶는 방법이다. 쇼핑몰의 상품 카드마다 이미지, 상품명, 가격을 같은 위치에 두면 사용자는 첫 번째 카드를 본 뒤 나머지도 빠르게 비교할 수 있다. 다만 강조가 필요한 상품 하나만 색을 다르게 주면 반복 속에서도 차이가 생긴다.
균형 구성은 화면의 한쪽으로 시선이나 무게가 쏠리지 않게 조절하는 일이다. 왼쪽에 큰 사진을 배치했다면 오른쪽에는 제목과 설명을 두어 시각적 무게를 맞출 수 있다. 좌우를 똑같이 나누는 대칭만 균형은 아니다. 한쪽에 큰 요소를 두고 반대편에 작은 요소 여러 개를 배치하는 비대칭도 안정적으로 보일 수 있다.
여백 구성은 비어 있는 공간을 남겨 요소 사이의 관계를 보여주는 방법이다. 여백은 남는 곳이 아니라 정보가 숨 쉴 자리다. 제목과 본문 사이가 너무 좁으면 하나의 덩어리처럼 보이고, 관련 없는 문단 사이가 너무 가까우면 내용이 섞여 보인다. 같은 그룹 안의 간격은 좁게, 다른 그룹 사이의 간격은 넓게 두면 구조가 분명해진다.
강조 구성을 만드는 작업 순서
- 목적 정하기
화면의 목표를 한 문장으로 적는다. 예를 들어 ‘신제품의 특징을 보여 주고 신청 버튼을 누르게 한다’처럼 쓴다. - 정보 순서 정하기
제목, 핵심 설명, 근거 자료, 행동 버튼의 순서를 정한다. 정보가 많다면 먼저 읽을 내용과 나중에 읽을 내용을 분리한다. - 강조 수단 하나씩 적용하기
크기, 굵기, 색, 위치, 여백 중 무엇을 쓸지 고른다. 처음부터 모두 사용하면 어떤 이유로 눈에 띄는지 판단하기 어렵다. - 반복되는 틀 만들기
카드나 목록이 여러 개라면 이미지 높이, 제목 위치, 버튼 형태를 통일한다. 반복은 화면을 빠르게 이해하게 돕는다. - 작은 화면에서 다시 보기
웹 화면을 넓은 모니터에서만 확인하지 말고 모바일 앱 구성처럼 좁은 폭에서도 살핀다. 긴 제목이 두 줄로 바뀌거나 버튼이 아래로 밀리지 않는지 확인한다. - 처음 보는 사람에게 물어보기
화면을 잠깐 보여 준 뒤 무엇이 먼저 보였는지 묻는다. 만든 사람이 의도한 순서와 실제 시선의 순서가 다를 수 있다.
색을 사용할 때는 주 색상, 보조 색상, 강조 색상의 역할을 미리 정하는 것이 좋다. 강조 색상을 여러 개 쓰면 각각의 의미가 약해진다. 색을 구분하기 어려운 사람도 정보를 놓치지 않도록 글자, 아이콘, 위치 차이를 함께 사용해야 한다.
자주 생기는 실수와 고치는 방법
첫 번째 실수는 모든 문장을 굵게 만드는 것이다. 굵은 글씨가 너무 많으면 일반 글씨와 차이가 없어지고, 화면이 무겁게 보인다. 꼭 기억해야 할 단어만 굵게 표시하고 나머지는 보통 굵기로 되돌려 보자.
두 번째 실수는 버튼마다 다른 색을 쓰는 것이다. 초록색은 저장, 파란색은 다음, 빨간색은 삭제처럼 의미를 정할 수 있지만, 같은 행동의 버튼 색이 화면마다 달라지면 사용자는 혼란을 느낀다. 버튼 색보다 먼저 행동의 이름을 분명하게 쓰는 것이 중요하다.
세 번째 실수는 여백을 줄여 정보를 많이 넣는 것이다. 화면에 더 많은 내용을 넣을 수는 있지만 읽는 속도는 느려진다. 특히 모바일에서는 손가락으로 누를 공간이 부족해 잘못 누를 가능성도 커진다. 글자와 버튼이 서로 붙어 있다면 내용 일부를 줄이거나 화면을 나누는 방법을 검토한다.
네 번째 실수는 장식으로 강조를 대신하는 것이다. 그림자, 테두리, 아이콘을 계속 추가해도 정보의 우선순위가 정리되지 않으면 효과가 약하다. 먼저 문장과 배치를 고친 뒤 장식은 마지막에 최소한으로 더하는 편이 안전하다.
자주 묻는 질문
강조 구성에서 가장 먼저 바꿔야 할 요소는 무엇인가요?
대부분은 정보의 순서와 제목의 표현부터 확인하는 것이 좋다. 제목이 모호한데 색만 바꾸면 눈에는 띄어도 의미는 전달되지 않는다. 사용자가 알고 싶은 내용을 짧고 구체적으로 쓴 다음 크기와 여백을 조정한다.
강조 색상은 몇 개가 적당한가요?
정해진 숫자보다 역할이 겹치지 않는지가 중요하다. 기본 색상 하나와 행동을 알리는 강조 색상 하나로 시작하면 관리하기 쉽다. 경고나 삭제처럼 별도 의미가 필요한 경우에만 추가 색상을 검토하고, 같은 색이 여러 뜻으로 쓰이지 않게 한다.
웹페이지 구성과 모바일 앱 구성은 같은 방식으로 만들면 되나요?
기본 원리는 같지만 공간과 조작 방식이 다르다. 넓은 웹페이지는 좌우 배치가 가능하지만, 모바일 화면은 세로 흐름과 손가락 터치 영역을 우선해야 한다. 웹에서 나란히 놓은 정보를 모바일에서는 순서를 정해 세로로 배치하고, 버튼 사이에 충분한 간격을 둔다.
디자인이 밋밋해 보이면 무엇을 더해야 하나요?
장식을 추가하기 전에 강조 단계가 제대로 나뉘었는지 확인한다. 제목과 본문의 크기 차이, 그룹 사이의 여백, 반복되는 카드의 규칙만 조정해도 화면의 리듬이 살아난다. 마지막으로 실제 문장을 넣어 확인해야 한다. 임시 글자로 만든 화면은 글자 수와 줄바꿈이 달라 결과가 달라질 수 있다.