논리적 접근을 통한 UI 디자인 팁 1

dy0628 2025. 6. 30. 15:31

사용자 인터페이스(UI)를 설계하는 것은 결코 쉬운 일이 아닙니다. 레이아웃, 간격, 타이포그래피, 색상 등 수많은 선택지가 존재하기 때문에 쉽게 압도될 수 있습니다. 또한 사용성, 접근성, 인간 심리학 등 추가적인 고려 사항을 더하면 도전 과제는 더욱 커집니다.

그러나 UI 디자인은 그렇게 복잡할 필요가 없습니다.

대부분의 시각적 및 상호작용 디자인 결정이 명확한 논리적 지침에 의해 안내된다고 해요.
예술적 천재성이나 직감에 의존하는 것이 아니라, 단순하고 명확한 지침에 따라 결정됩니다.

물론 창의적인 감각은 유용하지만, 인터페이스를 직관적이고 포용적이며 시각적으로 매력적으로 만드는 많은 요소는 절대적으로 배울 수 있습니다. 구조화된 접근 방식은 현명하고 일관된 디자인 선택을 가능하게 합니다. 이를 갖추지 않으면 결국 ‘적절해 보이도록’ 만들기 위해 시도와 오류를 반복하게 됩니다.

그리고 가장 좋은 학습 방법은? 실천입니다. 이제 실용적인 UI 디자인 팁에 대해 살펴볼께요.

1. 요소 간의 관련성에 따라 간격을 조정하세요 .

인터페이스 요소 간의 간격은 요소 간의 관련성에 따라 결정되어야 합니다. 더 밀접하게 관련된 요소들은 일반적으로 더 가까이 배치되어 관련성을 강조해야 합니다. 관련이 없는 요소들은 더 넓은 간격을 두어 분리해야 합니다.

이처럼 간격을 사용하는 것은 정보를 작은 그룹으로 나누는 가장 강력한 방법 중 하나입니다. 각 그룹을 직사각형으로 생각하면 인터페이스가 더 큰 직사각형 내부에 많은 작은 직사각형으로 구성되어 있음을 깨달을 수 있습니다. 가장 안쪽의 직사각형에 작은 간격을 적용한 후 바깥쪽으로 이동할수록 직사각형 사이의 간격을 점차 늘려가세요.

인터페이스 요소 간의 이상적인 간격을 결정하는 것은 짜증나고 시간이 많이 소요되는 작업일 수 있습니다. 선택할 수 있는 옵션이 무수히 많기 때문입니다. 시도와 오류를 반복하며 한 픽셀씩 조정하는 대신, 결정을 더 빠르게 내릴 수 있도록 간단한 사전 정의된 간격 옵션 세트를 만들어보세요.

8포인트 단위로 간단한 티셔츠 크기 간격 옵션을 설정합니다. 이는 8포인트 그리드를 사용하는 것으로도 알려져 있으며, 모든 인터페이스 요소가 8포인트 간격으로 분리된 수직 및 수평 가이드라인에 정렬됩니다. 더 자세한 인터페이스를 위해 4포인트 단위를 사용하면 더 많은 제어를 할 수 있습니다.

타이포그래피 스케일과 마찬가지로, 간격 옵션은 크기가 커질수록 더 큰 간격으로 증가해야 합니다.

예시에서 직사각형 사이에는 관련성 여부와 관계없이 미리 정의된 간격 옵션 중 초소형(8pt)과 소형(16pt)만 사용됩니다. 이로 인해 디자인이 혼잡하고 압축되어 이해하기 어려운 결과가 됩니다. 요소 간의 관련성에 따라 간격을 조정하면 콘텐츠를 명확히 분리하고 그룹화하는 데 도움이 됩니다.

다음은 사전 정의된 간격 옵션이 적용되기 전과 후의 예시입니다.

2. 인터페이스 요소가 3:1 대비 비율을 충족하도록 확인하십시오 .

대비(Contrast)는 두 색상 간의 인식되는 밝기 차이를 측정하는 지표입니다. 이는 1:1에서 21:1까지의 비율로 표현됩니다. 예를 들어, 검은색 배경에 검은색 텍스트는 가장 낮은 1:1 대비 비율을 가지며, 흰색 배경에 검은색 텍스트는 가장 높은 21:1 비율을 가집니다. 색상 대비를 측정하는 데 도움이 되는 많은 도구와 Figma 플러그인이 있습니다.

시각 장애를 가진 사람들이 인터페이스 세부 사항을 명확히 볼 수 있도록 돕기 위해, 최소한 웹 콘텐츠 접근성 지침(WCAG) 2.1 레벨 AA 색상 대비 요구사항을 충족하도록 노력해야 합니다. 이는 양식 필드와 버튼과 같은 사용자 인터페이스 요소가 최소 3:1 대비 비율을 갖춰야 한다는 의미입니다.

예시에서 아이콘과 버튼의 대비가 너무 낮습니다. 낮은 대비의 버튼은 시력이 약한 사용자가 버튼 모양을 인식하지 못해 버튼으로 인식하지 못할 위험이 있습니다. 버튼에 충분한 대비를 가진 경계를 추가하면 접근성을 확보할 수 있습니다. 또한 버튼의 밝은 회색 배경 채우기를 제거하여 사용자가 버튼이 비활성화되거나 비활성 상태로 오인하지 않도록 합니다. 아이콘의 낮은 대비는 더 어두운 회색 톤을 사용해 쉽게 수정할 수 있습니다.

3. 가장 중요한 동작을 위해 단일 주요 버튼을 사용하세요.

대부분의 웹사이트나 앱 프로젝트에서는 동작의 중요도를 표시하기 위해 3가지 버튼 무게(primary, secondary, tertiary)가 필요합니다. 인터페이스의 복잡성에 따라 더 작은 크기나 더 큰 크기의 버튼이 필요할 수도 있습니다.

다음 버튼 스타일은 친숙하고 접근성이 우수하며, 색상에만 의존하지 않는 명확한 시각적 계층 구조를 갖추고 있습니다. 이는 버튼을 디자인하는 유일한 방법은 아니지만 안전한 선택입니다. 일반적인 실수를 피하기 위해 더 많은 버튼 디자인 팁을 알아보세요.

주요 버튼의 목적은 인터페이스에서 가장 중요한 작업을 강조하는 것입니다. 이는 사용자가 작업을 완료하기 위해 다음에 무엇을 해야 하는지 이해하는 데 도움을 줍니다.

4. 버튼의 타겟 크기가 충분하도록 확인하세요.

작은 타겟은 큰 타겟보다 클릭하거나 터치하기 어렵습니다. 이는 특히 운동 기능이 저하된 사람이나 한 손으로 휴대폰을 잡고 엄지손가락으로 사용하는 경우에 더욱 그렇습니다.

다음 지침을 준수하여 버튼(및 기타 상호작용 요소)이 충분한 타겟 크기를 갖도록 하세요:

버튼 크기를 최소 48pt × 48pt로 설정하세요. 이는 8pt 그리드와 일치하며 WCAG 권장 사항인 44pt × 44pt보다 약간 더 큽니다.
자주 사용되는 버튼은 효율성을 높이고 실수로 누르는 것을 방지하기 위해 더 크게 만드세요.
버튼 사이를 최소 8pt 간격으로 분리하여 사용자가 잘못 누르는 것을 방지하세요.
예시에서 2개의 버튼의 타겟 크기는 이미 충분하지만, 버튼을 더 넓게 만들 수 있는 여지가 있습니다. 공간이 충분하므로 버튼을 넓혀 타겟 크기를 증가시킬 수 있습니다.

5. 중요한 콘텐츠가 보이도록 확인하세요.

사람들은 볼 수 없는 것을 사용하지 않습니다. 상호작용 메뉴 뒤에 콘텐츠를 숨기는 것은 인터페이스를 깔끔하고 최소화하는 편리한 방법이지만, 일부 사용자가 해당 콘텐츠를 놓칠 수 있어 위험합니다. 공간이 있다면, 중요한 콘텐츠와 기능이 필요할 때 보이도록 노력하세요.

예시에서처럼, 동작은 디자인을 깔끔하게 유지하기 위해 상호작용 메뉴 안에 숨겨져 있습니다. 깔끔하고 미니멀한 디자인이지만, 일부 사용자가 동작을 놓칠 수 있는 위험이 있습니다. “공유”와 “북마크”라는 2개의 동작을 표시할 공간이 있으므로, 이를 가시적으로 표시하여 놓치지 않도록 도와주세요.

6. 큰 텍스트에는 자간을 줄이세요.

큰 제목을 더 보기 좋게 만드는 작은 팁 중 하나는 자간(글자 사이의 간격)을 줄이는 것입니다. 자간을 얼마나 줄일지는 사용하는 글꼴과 크기에 따라 다르지만, 일반적으로 텍스트 크기가 커질수록 자간을 더 많이 줄이는 것이 좋습니다.

그 이유는 많은 글꼴이 작은 크기에서 긴 본문을 읽기 쉽게 하기 위해 디자인되었기 때문입니다. 이러한 글꼴은 “텍스트용 서체(text type)”라고 불리며, 작은 크기에서도 가독성을 높이기 위해 자간이 넓게 설정되어 있습니다. 반면, “디스플레이용 서체(display type)”는 큰 크기에서 사용되도록 디자인되어 보통 자간이 좁기 때문에 별도로 자간을 줄일 필요가 없습니다.

우리 예시에서는, 사람 이름의 자간을 줄여서 미적인 완성도를 높였습니다.

7. 색상만으로 정보를 전달하지 마세요

색상만으로 의미를 전달하거나 시각적 요소를 구분하지 마세요. 시력이 좋지 않거나 색각 이상이 있는 사용자는 색상의 차이를 인식하지 못할 수 있습니다. 색상 외에도 추가적인 시각적 단서를 사용하여 인터페이스 요소를 구분하세요.

예를 들어, 기사 목록 위에 있는 세 개의 탭을 보면 ‘Articles’ 탭이 선택된 상태인지 명확하지 않을 수 있습니다.
이는 선택된 탭을 표시하기 위해 색상의 미묘한 차이만 사용하고 있기 때문입니다.

이 경우, 선택된 탭 아래에 밑줄을 추가하면 시각적으로 더 명확하게 구분할 수 있어 사용자가 쉽게 인식할 수 있습니다.

마찬가지로, 하단 내비게이션에서도 선택된 아이콘을 다른 아이콘과 구분하기 위해 미묘한 색상 변화만 사용되고 있습니다.
이러한 방식은 눈에 잘 띄지 않을 수 있으므로, 선택된 아이콘을 채워진 형태로 표시하면 더 명확하게 구분할 수 있습니다.

출처:

https://medium.com/ux-planet/14-logic-driven-ui-design-tips-145ee08ea5a5