![]()
게슈탈트 이론과 형태 심리학은 UI/UX 디자인의 기본이 되는 시각 인지 원리이다. 사용자가 화면에서 정보를 어떻게 보고, 해석하는지를 이해하는 데 중요하게 사용된다. 게슈탈트 이론게슈탈트는 형태, 형상을 뜻하는 독일어이다. 게슈탈트 이론에 따르면 사람은 전체 이미지를 각 부분들 사이의 상호 관계와 맥락 속에서 지각한다. 1. 폐쇄성의 법칙기존의 지식을 토대로 완성되지 않은 형태를 완성된 형태로 지각한다. 위 그림은 원도 삼각형도 아니지만 우리는 친숙한 형태와 이미지를 떠올리고 보이지 않는 선을 이어 삼각형으로 인식한다. 즉, 무질서해 보이는 원과 꺽쇠들 사이에서 삼각형을 떠올리고 거기에 통일감을 느낀다. 2. 유사성의 법칙유사한 자극 요소들을 묶어서 지각한다. 따라서 개별 요소를 보기보단 하나의 집합..
![]()
명도 대비명도가 다른 두 색을 인접시켰을 때 그 차이가 뚜렷하게 느껴지는 현상이다.명도 차이가 클수록 더 강한 대비, 눈에 더 잘 띈다.텍스트와 배경의 명도 차이가 크면 글자가 더 잘 보이고 주목시키고 싶은 요소에 명도대비를 주면 효과적이다. 채도 대비채도가 다른 두 색을 인접시켰을 때 서로의 채도 차이가 더욱 뚜렷하게 나타나는 현상이다.채도가 낮은 색 옆에 채도가 높은 색을 두면 고채도의 색은 더욱 튀어 보이고, 저채도의 색은 더 죽어 보인다. 서점직원, 서점직원의 실전UI/UX 방법론 - 기초부터 로그인, 회원가입, 메뉴까지, 클래스101
색 부조화색상 간의 조화가 깨져서 시각적으로 불편하거나 혼란을 주는 상태이다. 따라서 색 부조화된 요소는 빠르게 눈에 띄고 위치 발견하기 쉽다. 만약 동질감을 주고 싶다면 같은 컬러들을 배치하면 된다. 색파장빨간색은 파장 중에서 가장 길고 에너지가 많이 필요하여 열정을 주는 색이다. 앞으로 튀어나오는 느낌과 강한 자극으로 뇌를 자극해서 맥박 및 호흡을 증가시킨다. 구매 버튼, 경고창, 알림에 사용된다.파란색은 파장이 두번째로 짧아 차분하고 신뢰감을 주는 색이다. 맥박 및 호흡을 느리게 하여 안정감을 유도하고 냉정한 느낌을 준다. 은행, IT기업, 헬스케어 서비스에 사용된다.보라색은 빨강과 파랑을 혼합한 색으로 낯설고 비현실적 느낌을 주는 색이다. ―추측하기로 자연에서 보기 힘들어서 그런게 아닐까... ..
중심시란 사용자가 대상을 또렷하게 보는 시각 영역이다. 보통 중요한 텍스트, 버튼, 정보는 중심시 영역에 배치한다. 예를 들어 로그인, 검색창, CTA(Call to Action) 등이 있다. 주변시란 중심시를 벗어난 나머지 넓은 영역이다. 색상, 움직임, 형태는 어느 정도 인식 가능하지만 정확한 정보 파악은 어렵다. 예를 들어 배너, 알림, 광고 등이 있다. 이때 너무 많은 움직임을 배치하면 주의 산만을 유발할 수 있으므로 주의해야 한다. 시야각이란 사람이 고개를 움직이지 않고 눈만으로 인식할 수 있는 전체 범위이다. 실질적으로 사용자의 시선이 집중되는 범위는 중심시 그리고 근주변시 정도로 제한적이다. 따라서 사용자의 주요 시야 내에 핵심 정보를 배치하고 한 화면 내에 중요한 정보가 들어오게끔 디자인해..
![]()
해당 다이어그램에 따르면 사람의 시선은 왼쪽 위에서 시작해 오른쪽으로 이동하며 글자를 읽고 중력을 따라 아래로 떨어져 오른쪽 아래에서 끝난다고 정의한다. 이때 시선의 이동 방향을 독서 중력이라고 부른다. 해당 다이어그램은 페이지나 화면 디자인에서 정보의 우선순위와 시선의 흐름을 고려해 레이아웃을 구성하는 데 유용한 도구이다. 대부분의 사용자는 웹페이지를 책처럼 상단 좌측부터 훑기 시작한다. 그래서 사이트마다 로고를 좌측 최상단에 위치한다. 따라서 중요한 기능(로그인, 검색 등)을 시선이 머무는 위치에 배치해야하기 때문에 좌측 상단에 놓는다.네이버도 과거엔 로그인을 좌측 상단에 위치했다. 하지만 현재는 우측으로 옮겼다. 이유를 추측해보면 광고가 우측에 있을 경우 비교적 덜 주목 받는 공간이기에 광고효과가..
타겟 사용자를 분석을 바탕으로 브랜드의 핵심 가치를 효과적으로 전달할 수 있도록 시각적 요소를 어떻게 구성하고 배치할지 고민해야한다. 예를 들어 특정 타겟층에 맞는 색상, 글꼴, 구성 등을 선택하여 브랜드의 메시지를 명확하게 전달한다. 이때 심플한 화면은 더 어렵기 때문에 치밀한 고민이 필요하다. UI/UX 핵심원칙1. 벤치마킹 및 화면 분석법유사한 서비스나 웹사이트를 분석하여 어떻게 레이아웃을 구성했는지, 어떤 디자인 패턴을 사용했는지 참고한다. 또한 사용자들이 자주 사용하는 기능이나 인터페이스를 분석하여 반영하는 과정이다. 2. 서비스의 의도와 성격에 따른 레이아웃과 UI 차이서비스의 목적과 성격에 부합한 UI를 설계하는 것이 중요하다. 예를 들어 정보 중심의 웹사이트과 쇼핑몰은 UI와 레이아웃이 확..
