패턴

패턴은 사용자가 디바이스를 조작해 행동하는 일반적인 과정을 뜻합니다. 컴포넌트와 다양한 시각 요소를 이용해 페이지를 설계하고, 각 페이지에서 사용자와 상호작용하며 최종 결과에 도달하기까지의 과정을 설계합니다. 사용자에게 익숙한 일반적인 패턴을 많이 사용하며, 맥락에 맞추어 변형하기도 합니다.

레이어

레이어는 요소를 겹치는 시각 기법으로 투명한 필름을 여러겹 사용하는 것을 표현하는 것입니다. 사용자가 서비스가 동작하는 구조를 쉽게 이해하고 원하는 정보를 쉽게 탐색하게 돕기 위한 기법입니다. 블록처럼 차곡차곡 쌓을 수도 있으며, 착시 효과를 이용해 시각 요소를 겹쳐 공간감을 느끼게 할 수도 있습니다.

컴포넌트

컴포넌트는 사용자와 상호작용하는 기본적인 형태로 어느 공간에서도 기능을 수행할 수 있는 최소한의 단위입니다. 컴포넌트에서 가장 중요한 속성은 재사용으로 어떤 맥락에서도 사용자가 동일하게 이해하고 사용할 수 있어야 합니다. 특정 영역에서만 사용 가능하지 않도록 용도를 명확하게 정의하고, 색, 텍스트, 아이콘 등을 이용해 시각적으로 적절하게 구성해야 합니다.

레이아웃

레이아웃은 특정 영역 안에 요소를 배치하는 것입니다. 스크린에서 사용하는 레이아웃은 정적인 화면 균형 뿐만 아니라 서비스의 추상적인 공간의 구조를 적절하게 표현해야합니다. 또한 다양한 스크린에서 표시되기 때문에어떤 환경에서도 유사한 맥락으로 사용할 수 있도록 설계해야 합니다.

아이콘

아이콘은 대상의 특징을 강조해 만드는 기호로 다른 언어보다 보편적으로 이해할 수 있는 시각 언어입니다. UI 아이콘, 픽토그램, 사인 등으로 대표되며 좁은 영역을 차지하면서도 의미를 전달할 수 있어 다양한 영역에서 쓰이고 있습니다.

다른 요소보다 개성을 부여하기 쉽고 시각 원리에 대한 실험을 할 수 있어 많은 디자이너의 사랑을 받고 있습니다. 이 글에서는 아이콘의 속성과 UI 디자인에서 권장하는 아이콘 디자인 가이드를 요약했습니다.

타이포그래피

문자는 다른 시각 언어보다 구체적이고 정확하게 정보를 전달하는 언어입니다. 물체나 풍경 같은 것들은 아이콘이나 이미지로 알려주는게 좋을 수 있지만, 행동이나 개념을 알려줄 때는 문자가 더 효율적입니다. 같은 문화권이라면 의미 전달이 확실하기 때문에 가장 많이 쓰이는 시각 요소입니다.

색

색은 강한 자극을 주는 시각 언어입니다. 화면 내에서 사용자를 행동하게 하거나 반드시 알아야하는 정보를 강조하기 위해 주로 사용하는 요소입니다. UI에서 시각 원리가 어떻게 적용되는지 예시를 들어 정리했습니다.

iOS & Android: UI 디자인

디지인할 때 알아두어야 할 각 플랫폼의 차이점에 대한 정리입니다. 모바일 디자인이 고도화되면서 점점 비슷한 UX로 발전하고 있지만, 그 안에서도 디테일한 차이가 있습니다. 서비스를 디자인 할 때 목적에 따라 패턴을 디자인하고 각 플랫폼에 동일하게 적용하는 편이지만 OS에서 권장하는 UI 가이드라인을 살펴보면 적합한 패턴을 선택하는데 도움이 될 것입니다.

용어 사전

디자인하면서 자주 사용하는 용어들에 대한 간단한 정의를 모은 글입니다.