컬러 : 브랜드와 시스템의 언어
컬러는 단순히 화면을 꾸미는 시각적 요소가 아니다. 브랜드의 정체성과 서비스의 분위기를 전달하고, 중요한 정보를 강조하며, 사용자의 행동을 자연스럽게 유도하는 역할을 한다.
UX/UI 디자인에서 컬러를 효과적으로 활용하려면 먼저 색을 구성하는 기본 요소인 색상(Hue), 명도(Value), 채도(Saturation)를 이해할 필요가 있다.
색상 (Hue)
색상은 빨강, 파랑, 노랑처럼 각각의 색을 구분하는 고유한 속성을 의미한다.
실무에서는 색상을 통해 브랜드 아이덴티티를 표현하거나 버튼과 같은 중요한 요소를 강조한다. 서비스의 대표 색상인 Primary Color는 전체적인 톤앤매너를 형성하는 데에도 중요한 역할을 한다.
컬리는 보라색을 대표 컬러로 사용하며,
버튼이나 라벨, 칩 등 다양한 UI 요소에 같은 계열의 색상을 명도와 채도를 조절해 활용한다. 이처럼 하나의 색상을 중심으로 변형하면 브랜드의 일관성을 유지하면서도 다양한 UI 상태를 표현할 수 있다.
명도 (Value, Brightness)
명도는 색이 얼마나 밝고 어두운지를 나타낸다. 명도가 높아질수록 흰색에 가까워지고, 낮아질수록 어두운 색에 가까워진다.
명도에 따라 사용자가 느끼는 분위기도 달라진다. 명도가 높으면 가볍고 부드러우며 깨끗한 인상을 줄 수 있고, 반대로 명도가 낮으면 무겁고 진중하며 강한 인상을 표현하기 좋다.
따라서 같은 색상이라도 명도를 어떻게 조절하느냐에 따라 서비스가 전달하는 분위기는 크게 달라질 수 있다.
채도 (Saturation)
채도는 색이 얼마나 선명하고 강하게 느껴지는지를 나타낸다. 채도가 높을수록 색이 쨍하고 또렷하게 보이며, 낮아질수록 탁하고 차분한 느낌을 준다.
UX/UI에서는 이러한 특성을 이용해 정보의 중요도나 UI의 상태를 구분할 수 있다. 중요한 CTA 버튼처럼 사용자의 시선을 끌어야 하는 요소에는 비교적 선명한 색을 사용할 수 있고, 아직 입력 조건이 충족되지 않은 Disabled 버튼에는 채도를 낮춰 비활성 상태임을 전달할 수 있다.
컬러는 단순한 장식이 아니라 무엇이 중요하고, 지금 어떤 상태이며, 사용자가 다음에 무엇을 해야 하는지 알려주는 시각적 정보가 될 수 있다.
◻️ 팬톤과 올해의 컬러
PANTONE(팬톤)은 전 세계의 디자이너, 브랜드, 제조사가 동일한 색상을 일관되게 사용할 수 있도록 색의 기준을 제공하는 기업이다.
팬톤은 매년 ‘올해의 컬러(Color of the Year)’를 선정한다. 이 컬러는 단순히 유행하는 색을 고르는 것에 그치지 않고 사회 분위기, 기술 변화, 트렌드, 글로벌 이슈 등을 종합적으로 고려해 그 시대에 사람들이 필요로 하는 감정과 메시지를 색으로 표현한다.
출처: Pantone – Color of the Year 20262026년 올해의 컬러는 Cloud Dancer로, 부드럽고 공기처럼 가벼운 화이트 계열의 컬러다. 빠른 기술 변화와 과도한 정보 속에서 사람들이 원하는 편안함, 안정감, 여백과 같은 이미지를 담고 있다.
이렇게 선정된 컬러는 패션뿐만 아니라 산업 디자인, 인쇄, IT, 브랜딩 등 다양한 분야에 영향을 미친다. 컬러 트렌드를 공부할 때 단순히 ‘올해 무슨 색이 유행하는가’를 보는 것보다 왜 그 색이 선택되었는지 함께 살펴보는 것도 도움이 된다.
브랜드 컬러와 정서
넷플릭스, 카카오, 스타벅스처럼 브랜드의 이름만 들어도 특정한 색이 자연스럽게 떠오르는 경우가 있다. 이처럼 브랜드를 대표하고 정체성을 전달하는 색을 브랜드 컬러(BI Color)라고 볼 수 있다.
색상마다 전달하는 정서적인 이미지가 다르기 때문에 브랜드가 어떤 인상을 전달하고 싶은지에 따라 대표 컬러도 달라진다.
🟥 빨강 (Red)
빨강은 강하고 활기찬 느낌을 주며 주목도가 높다. 시선을 빠르게 끌고 즉각적인 행동을 유도하는 데 효과적이기 때문에 엔터테인먼트, 플랫폼, 미디어 분야 등에서 활용되는 모습을 볼 수 있다.
🟨 노랑 (Yellow)
노랑은 밝고 긍정적이며 친근한 인상을 준다. 가볍고 친숙하게 느껴져 사용자와의 심리적 거리나 진입 장벽을 낮추는 데 활용할 수 있다.
🟩 초록 (Green)
초록은 자연스럽고 건강하며 안정적인 느낌을 준다. 자연이나 건강을 연상시키기 때문에 구독, 라이프스타일, 웰니스 서비스 등에서 활용하기 좋다.
스타벅스, 시리즈, 런드리고처럼 같은 초록을 사용하는 브랜드라도 명도와 채도에 따라 전달되는 분위기는 달라질 수 있다. 예를 들어 조금 더 낮은 채도와 무게감 있는 초록은 차분하고 프리미엄한 이미지를 표현하는 데 활용할 수 있다.
🟦 파랑 (Blue)
파랑은 신뢰할 수 있고 차분한 느낌을 주며 신뢰성, 전문성, 합리성과 같은 이미지를 전달한다.
이러한 특성 때문에 신뢰가 중요한 IT·금융 분야에서 자주 볼 수 있다.
🟪 보라 (Purple)
보라는 고급스럽고 감성적인 인상을 주며 차별화, 창의성, 프리미엄 이미지를 표현하는 데 활용할 수 있다.
특히 컬리와 퀸잇처럼 프리미엄 전략을 강조하는 서비스에서 보라색을 브랜드 아이덴티티와 연결해 활용하는 모습을 확인할 수 있다.
⬛️ 검정 (Black)
검정은 고급스럽고 강한 인상을 주며 권위, 절제, 프리미엄과 같은 이미지를 표현하기 좋다.
같은 색상이라도 명도와 채도에 따라 전혀 다른 인상을 만들 수 있다. 따라서 브랜드 컬러를 선택할 때는 색 자체뿐 아니라 어떤 톤으로 사용할 것인지까지 함께 고려해야 한다.
색상 조화의 법칙
여러 색을 함께 사용할 때는 색상환(Color Wheel)을 기준으로 색의 관계를 이해하면 보다 안정적인 컬러 조합을 만들 수 있다. 대표적으로 보색, 유사색, 삼각색을 활용할 수 있다.
보색 (Complementary)
보색은 색상환에서 서로 마주 보는 색을 의미한다.
두 색의 차이가 크기 때문에 강렬한 대비가 만들어지고 주목도가 높아진다. 따라서 특정 요소를 강조하거나 시선을 집중시키고 싶을 때 활용하기 좋다.
유사색 (Analogous)
유사색은 색상환에서 서로 인접한 2~3개의 색을 조합하는 방식이다.
비슷한 계열의 색을 사용하기 때문에 전체적으로 조화롭고 안정적이며 자연스러운 인상을 만든다. 배너나 배경처럼 전체적인 분위기를 안정적으로 구성하고 싶을 때 활용하기 좋다.
삼각색 (Triadic)
삼각색은 색상환에서 약 120° 간격으로 위치한 세 가지 색을 조합하는 방식이다.
색 사이의 차이가 있으면서도 균형을 이루기 때문에 활기차고 다채로운 인상을 만들 수 있으며 포스터나 캠페인 디자인 등에 활용할 수 있다.
다만 여러 색이 동시에 강하게 드러날 수 있어 톤을 적절하게 조절하지 않으면 산만해 보일 수 있으므로 색의 비율과 명도·채도를 함께 고려하는 것이 중요하다.
컬러를 효과적으로 활용하는 방법
컬러 강조와 어포던스
어포던스(Affordance)는 사용자가 별도의 설명 없이도 어떤 행동을 해야 하는지 자연스럽게 인지하고 행동하도록 유도하는 것을 의미하며, 흔히 행동 유도성이라고 표현한다.
UI에서는 컬러를 이용해 이러한 어포던스를 강화할 수 있다.
알림 아이콘에 빨간색 배지를 표시하면 사용자는 새로운 알림이 있다는 것을 빠르게 인지하고 확인하려는 행동을 하게 된다.메시지를 작성한 뒤 전송 버튼만 다른 색으로 강조하는 것도 같은 원리다.
사용자는 별도의 설명을 읽지 않아도 ‘이 버튼을 누르면 메시지가 전송되겠구나’라고 자연스럽게 판단할 수 있다.어포던스는 디지털 UI에만 존재하는 개념도 아니다. 일상적인 제품이나 공간에서도 형태를 통해 행동을 유도할 수 있다.
문을 밀어야 할 때는 손잡이를 없애 자연스럽게 밀도록 만들고,
당겨야 할 때는 잡을 수 있는 손잡이를 제공하면 사용자가 별도의 안내문을 읽지 않아도 행동을 예측하기 쉬워진다.적절한 컬러와 형태는 사용자가 ‘어디를 눌러야 하지?’라고 고민하는 시간을 줄여주는 시각적 단서가 된다.
시스템 컬러 (System Color)
시스템 컬러는 브랜드의 정체성을 표현하기 위한 색이 아니라, 사용자에게 현재 상태와 필요한 행동을 명확하게 전달하기 위한 기능적인 색상이다.
대표적으로 UI에서는 Error는 Red, Success는 Green, Information은 Blue와 같이 상태별 컬러를 사용할 수 있다.
오류가 발생했을 때 빨간색을 사용하면 사용자가 문제를 빠르게 인지하고 수정하도록 도울 수 있고, 초록색은 작업이 정상적으로 완료되었다는 상태를, 파란색은 다음 행동을 판단하는 데 필요한 정보를 전달하는 데 활용할 수 있다.
다만 실제 서비스에서는 성공이나 정보 상태 등에 브랜드 컬러를 활용하는 경우도 있다.
중요한 것은 특정 색을 기계적으로 적용하는 것이 아니라 사용자가 현재 상태를 빠르게 이해하고 다음 행동을 판단할 수 있도록 일관된 기준을 만드는 것이다.
📌 컬러 팔레트 참고 사이트
직접 컬러 조합을 만드는 것이 어렵다면 팔레트 사이트를 활용해 색상 조화와 다양한 레퍼런스를 탐색할 수 있다.
- Adobe Color : 색상환을 기반으로 보색·유사색·삼각색 등의 팔레트를 만들 수 있으며 RGB·CMYK·HEX 코드 확인, 이미지 색상 및 그라디언트 추출 등이 가능하다.
색상환의 위치를 조절하면 명도와 채도가 달라지는 모습을 비교할 수 있고, 완성된 색상의 코드를 복사해 디자인에 바로 적용할 수도 있다.
탐색 기능에서는 Happy, Luxury 등 특정 분위기나 키워드에 맞는 팔레트를 살펴볼 수 있다. 이를 비교하면서 어떤 명도와 채도가 특정 분위기를 만드는지 관찰하면 컬러 감각을 익히는 데 도움이 된다.
또한 이미지를 업로드하면 이미지에서 주요 컬러를 추출해 팔레트로 만들어준다.
마음에 드는 포스터나 레퍼런스를 발견했을 때 ‘이 디자인에는 어떤 색 조합이 사용됐을까?’를 분석하는 용도로 활용하기 좋다. 추출된 컬러는 직접 위치를 조절할 수 있으며 RGB나 HEX 코드로 확인할 수 있다.
이미지를 기반으로 그라디언트를 추출하는 기능도 제공하기 때문에 레퍼런스에서 컬러와 그라디언트를 분석할 때 함께 활용할 수 있다.
- Color Hunt : 전 세계 사용자가 만든 컬러 팔레트를 인기·랜덤·계절·분위기 등 다양한 기준으로 탐색할 수 있다. 특정 무드에서 반복적으로 사용되는 색의 명도와 채도를 살펴보며 톤앤매너를 설정할 때 참고하기 좋다.
특히 Adobe Color와 Color Hunt는 컬러 팔레트를 만들거나 레퍼런스를 찾을 때 활용하기 좋은 사이트다.
- Color Space : 원하는 색상 코드를 입력하면 해당 색을 기준으로 어울리는 컬러 조합을 자동으로 추천해준다. Hailpixel처럼 마우스를 움직이며 색을 직관적으로 탐색할 수 있는 도구도 있다.
- Coolors : 컬러 팔레트를 빠르게 생성하고 탐색할 수 있는 도구로, 색상 코드 확인부터 밝기 변형, 이미지 기반 컬러 추출까지 다양한 기능을 제공한다. 추출한 색상에 필요한 컬러를 추가해 팔레트를 확장하는 방식으로도 활용할 수 있다.
- Hailpixel : 마우스를 움직이며 직관적으로 색상을 탐색할 수 있어 색을 찾는 과정 자체를 인터랙티브하게 경험할 수 있다.
📌 그라디언트 참고 사이트
- Gradient Hunt : 인기·신규·랜덤 그라디언트를 탐색할 수 있다.
선형뿐 아니라 중심에서 색이 퍼져 나가는 Radial Gradient 등 다양한 형태의 그라디언트를 참고할 수 있다.
- WebGradients :
원형 UI를 통해 다양한 그라디언트를 탐색할 수 있다. 각 조합에 색이 연상시키는 분위기를 표현한 이름이 붙어 있어 컬러와 감정의 관계를 함께 살펴보기 좋은 사이트며, 코드도 함께 제공된다.
- Design Seeds :
자연, 동물, 풍경 등의 이미지에서 추출한 컬러 팔레트를 제공한다. 특정 사진이 가진 분위기가 어떤 색 조합으로 구성되어 있는지 확인할 수 있으며, HEX 코드도 함께 살펴볼 수 있다.
- uiGradients : 화면 전체에서 다양한 그라디언트 조합을 크게 확인할 수 있어 실제 디자인에 사용할 그라디언트 레퍼런스를 탐색하기 좋다.
🎨 레퍼런스 이미지에서 컬러 찾기
컬러를 처음부터 직접 조합하는 것이 어렵다면 마음에 드는 레퍼런스 이미지에서 컬러를 발견하는 방법을 활용하면 된다.
Pinterest 등에서 원하는 분위기의 이미지를 찾은 뒤 color theme, color theme ideas, color palette와 같은 키워드로 검색해 레퍼런스를 모아볼 수 있다.
이후 Adobe Color와 같은 도구에 이미지를 넣어 주요 컬러나 그라디언트를 추출하면 막연하게 ‘예쁜 색’을 고르는 것보다 원하는 무드를 구체적인 팔레트로 정리하기 쉬워진다.
컬러를 잘 사용한다는 것은 예쁜 색을 많이 사용하는 것이 아니라, 브랜드가 전달하려는 분위기와 정보의 중요도, 사용자의 행동과 상태에 맞는 색을 목적에 따라 선택하는 것에 가깝다.
시각적 위계를 만드는 4가지 방법
디자인에서 모든 요소가 동일한 중요도를 갖는 것은 아니다.
사용자가 중요한 정보를 먼저 발견하고 자연스럽게 다음 요소로 시선을 이동할 수 있도록 정보의 우선순위를 시각적으로 구분하는 것을 시각적 위계(Visual Hierarchy)라고 한다.
시각적 위계는 크기, 색, 공간감, 형태를 활용해 만들 수 있다. 각 방법을 살펴보기 전에 디자인을 구성하는 기본 요소인 점·선·면부터 이해해 보자.
조형의 기본 요소 : 점·선·면
조형은 점·선·면과 같은 시각적 요소를 구성해 형태를 만드는 것으로, 회화와 조각부터 그래픽·영상·UI 디자인까지 다양한 분야에서 활용된다.
✔️ 점 (Point)은 조형 작은의 가장 기본 단위로, 특정 위치를 표시하거나 시선이 머무는 지점을 만든다. 여러 점의 크기와 간격을 조절하면 리듬감과 방향성을 표현할 수도 있다.
✔️ 선 (Line)은 점이 이어져 만들어지는 요소로, 방향과 길이, 움직임이나 속도감을 표현한다. 면에 비해 가볍고 날렵한 인상을 주며 시선의 흐름을 유도하는 데 활용할 수 있다.
✔️ 면 (Plane)은 선으로 둘러싸인 영역으로, 화면에서 일정한 공간을 차지하며 무게감과 안정감을 만든다. 배경이나 카드, 넓은 색상 영역처럼 정보를 묶고 구분하는 데에도 활용된다.
점·선·면은 고정된 형태가 아니라 크기, 간격, 배치와 바라보는 각도에 따라 서로 다르게 인식될 수 있다. 작은 점들이 촘촘하게 모이면 선처럼 보이고, 선이 반복되거나 두께와 각도가 달라지면 하나의 면처럼 느껴지기도 한다.
포스터와 타이포그래피에서도 이러한 원리를 활용한다.
개별 글자나 작은 요소는 점처럼 보이지만, 여러 요소가 연결되면 선의 흐름을 만들고 전체적으로는 하나의 면을 형성할 수 있다.
1. 크기를 이용한 강조
크기는 요소의 중요도를 구분하는 가장 직관적인 방법 중 하나다. 동일한 크기의 요소들 사이에서 특정 요소만 크게 표현하면 자연스럽게 시선이 집중된다.
중요한 정보를 강조하려면 요소 간 크기 차이를 충분히 확보해야 한다. 차이가 작으면 모든 요소가 비슷한 중요도로 인식되어 시각적 위계가 약해진다.
UI에서는 제목과 본문, 주요 수치와 보조 정보 등에 크기 차이를 적용해 사용자가 읽어야 할 순서를 안내할 수 있다.
2. 색을 이용한 강조
색은 크기와 함께 시선을 집중시키는 중요한 수단이다. 비슷한 크기의 요소라도 하나에만 다른 색을 적용하면 해당 요소가 눈에 띄게 된다.
회원가입, 로그인, 주요 CTA 버튼처럼 사용자가 반드시 확인해야 하는 요소에는 주변과 구분되는 색을 선택적으로 적용할 수 있다. 반면 모든 요소에 강한 색을 사용하면 시선이 분산되어 무엇이 중요한지 판단하기 어려워진다.
강조가 목적이 아니더라도 제목, 설명, 세부 정보 사이에 적절한 명도 차이를 주면 과도한 대비 없이 정보의 위계를 구분할 수 있다.
3. 공간감을 이용한 강조
공간감은 평면적인 화면에 깊이와 거리감을 부여해 특정 요소를 더 가깝거나 멀리 있는 것처럼 인식하게 만드는 방법이다.
대표적으로 원근감과 그림자를 활용할 수 있다.원근감으로 공간감 주기
원근감은 요소의 크기와 배치에 차이를 주어 거리감을 표현한다. 같은 평면에 놓인 원이라도 크기가 점차 작아지면 멀어지는 것처럼 보인다.
포스터에서는 선과 면을 소실점으로 모이도록 배치해 공간이 깊게 이어지는 효과를 만들 수 있다. 풍경 사진에서도 가까운 건물은 크게, 멀리 있는 건물은 작게 보여 자연스럽게 거리감이 형성된다.
그림자로 공간감 주기
그림자는 요소와 배경 사이에 깊이를 만들어 평면적인 화면에서도 입체감을 느끼게 한다.
UI에서는 카드나 FAB(Floating Action Button)처럼 배경 위에 떠 있거나 강조가 필요한 요소에 그림자를 적용할 수 있다. 그림자가 작고 은은하면 배경에서 살짝 떠 있는 느낌을 주고, 크고 넓게 퍼질수록 더 큰 깊이감을 표현한다.
4. 형태를 이용한 강조
형태는 요소의 윤곽과 입체적인 표현 방식을 통해 시각적 차이를 만드는 방법이다. 선, 면, 그림자처럼 표현이 달라지면 동일한 요소도 사용자에게 전달하는 인상이 달라진다.
이러한 차이는 UI 디자인의 변화에서도 살펴볼 수 있다.
▫️ 스큐어모피즘 (Skeuomorphism)는 실제 사물의 재질, 현실적인 질감, 그림자와 입체감을 디지털 인터페이스에 재현하는 디자인 방식이다.
초기 iOS 6의 계산기 UI는 실제 계산기 버튼처럼 보이도록 입체적인 형태와 질감을 적용했다. 익숙한 사물의 모습을 활용해 기능을 직관적으로 전달하는 방식이다.
▫️ 플랫 디자인 (Flat Design)는 불필요한 장식과 입체적인 표현을 줄이고 단순하고 명확한 형태를 강조한다. 색상, 형태, 타이포그래피를 중심으로 구성하는 방식이다.
iOS 11의 계산기 UI는 이전보다 단순하고 평면적인 형태를 사용한다. 장식적인 요소를 줄여 숫자와 버튼의 기능이 더 명확하게 드러나도록 구성한 사례다.
글래스모피즘 (Glassmorphism)는 반투명한 표면과 배경 흐림, 은은한 테두리와 그림자를 활용해 유리처럼 비치는 질감과 깊이감을 표현하는 방식이다. 플랫 디자인의 단순한 형태인 평면성을 유지하면서도 적절한 입체감을 함께 보여준다.
이처럼 형태를 어떻게 표현하느냐에 따라 사용자가 느끼는 시각적 자극과 정보의 우선순위가 달라진다.
🪺 실무 및 포트폴리오 줍줍
실제 디자인에서는 개별 요소가 화면 전체에서 어떤 역할을 하는지 살펴볼 필요가 있다.
특히 레퍼런스 이미지에서 색상을 분석하거나, 여러 색상의 균형을 맞추고, 이미지와 텍스트를 자연스럽게 연결하는 과정에서는 작은 차이만으로도 디자인의 인상이 달라질 수 있다.
1. 색이 전달하는 인상을 구체적으로 설명하기
레퍼런스 이미지에서 컬러를 추출했다면 각 색상이 전달하는 인상을 분석해 볼 수 있다.
단순히 차분하다, 따뜻하다, 고급스럽다고 표현하는 것보다 어떤 색의 특성이 그러한 분위기를 만드는지 함께 설명하면 컬러를 더 깊이 이해하는 데 도움이 된다.
낮은 채도의 핑크는 밝고 사랑스러운 느낌뿐 아니라 빈티지한 분위기를 표현할 수 있다. 명도가 낮은 크림슨 레드는 묵직하고 고급스러운 인상을 줄 수 있다.밝은 노랑은 생기 있고 활발한 느낌을 전달할 수 있다.이처럼 색상이 연상시키는 이미지와 명도·채도의 특성을 연결하면 컬러 선택의 근거를 구체적으로 설명할 수 있다.
또한 자연에서 영감을 받은 색상이라면 단순히 자연스럽다고 표현하기보다 맑은 하늘, 마른 나뭇잎, 햇빛이 비치는 모래사장처럼 어떤 장면을 연상시키는지 구체화하는 것도 방법이다.
2. 어두운 컬러로 화면의 무게중심 잡기
밝고 부드러운 색상이 많은 팔레트에 명도가 낮은 색상을 함께 사용하면 화면에 깊이와 무게감을 더할 수 있다.
연한 보라와 파스텔 계열의 색상이 중심인 디자인에 블랙에 가까운 짙은 보라나 네이비를 추가하면 밝은 색상들이 상대적으로 돋보이면서 전체적인 균형을 잡는 데 도움이 된다.
반대로 명도와 채도가 모두 낮은 색상만 사용하면 화면이 지나치게 무겁거나 답답하게 느껴질 수 있다. 이때는 상대적으로 밝거나 선명한 색상을 포인트로 활용해 분위기를 조절할 수 있다.
컬러 팔레트를 구성할 때는 각각의 색상이 어울리는지뿐 아니라 밝은 색과 어두운 색이 화면에서 어떤 비중을 차지하는지 함께 살펴보는 것이 좋다.
3. 이미지와 배경색을 자연스럽게 연결하기
따뜻한 색상의 이미지를 사용한 디자인에서 이미지 아래 영역을 순백색으로 처리하면 두 영역의 경계가 지나치게 뚜렷해 보일 수 있다.
이러한 경우 이미지에 사용된 색상과 유사한 미색이나 채도가 낮은 연노랑을 배경에 활용하면 시선이 갑작스럽게 끊기는 느낌을 줄일 수 있다.
노란색이 중심인 음식 이미지 아래에 연한 노랑 계열의 배경을 사용하면 이미지와 텍스트 영역이 자연스럽게 연결된다.
다만 영역을 명확하게 구분해야 하는 디자인이라면 의도적으로 대비가 큰 배경색을 사용할 수도 있다. 따라서 이미지와 배경의 연결감이 필요한지, 구분이 필요한지를 고려해 선택하는 것이 좋다.
4. 장식 요소가 핵심 정보보다 눈에 띄지 않도록 조절하기
이미지나 도형, QR코드와 같은 요소는 정보를 보완하거나 시각적인 재미를 더할 수 있지만, 배치에 따라 중요한 정보보다 먼저 눈에 들어올 수도 있다.
행사 안내 화면에서 날짜와 장소 사이에 QR코드를 배치하면
시선이 QR코드에 집중되어 핵심 정보를 읽는 흐름이 끊길 수 있다.
이때 QR코드를 화면의 왼쪽이나 오른쪽으로 이동하고,
날짜와 장소를 하나의 정보 영역으로 정리하면 중요한 내용을 더 쉽게 확인할 수 있다.장식적인 요소를 추가할 때는 단순히 화면이 풍부해 보이는지보다 핵심 정보가 잘 드러나는지, 시선의 흐름을 방해하지 않는지 함께 검토하는 것이 중요하다.
5. 시각적 효과를 적용한 뒤 전체 화면에서 다시 확인하기
그림자나 도형을 활용하면 특정 요소에 공간감을 주거나 중요한 정보를 강조할 수 있다.
하지만 개별 요소에 효과를 적용한 뒤에는 전체 화면에서 어떻게 보이는지 다시 확인할 필요가 있다.
제목에 그림자를 추가했다면 제목이 배경과 충분히 구분되는지 살펴보고,
강조를 위해 도형을 배치했다면 주변 텍스트와 이미지의 균형이 유지되는지 확인하는 것이 좋다.시각적 효과는 많이 적용하는 것보다 필요한 요소에 적절하게 활용하는 것이 중요하다.
