이미지가 질문이면 왼쪽, 답이면 오른쪽
중년개발자
@loxo
약 12시간 전
이미지는 왼쪽일까, 오른쪽일까?
사람의 시선으로 이해하는 UX 배치
웹페이지를 하나의 가게라고 생각해보자.
사람이 가게 앞을 지나가다가 멋진 상품을 발견한다.
먼저 상품을 보고, 관심이 생기면 가격표와 설명을 읽는다.
웹페이지도 똑같다.
이미지가 먼저 보이면 “이게 뭐지?”라고 생각하고,
텍스트가 먼저 보이면 “왜 필요한 거지?”를 이해한다.
이미지와 텍스트의 좌우 배치는 단순한 디자인 취향이 아니다.
사용자가 무엇을 먼저 느끼고, 무엇을 나중에 이해하게 할지 정하는 일이다.
이미지를 왼쪽에 두는 경우
먼저 보여주고, 나중에 설명한다
처음 보는 카페 앞을 지나간다고 생각해보자.
우리는 메뉴판의 긴 설명부터 읽지 않는다.
예쁜 인테리어와 맛있어 보이는 디저트를 먼저 본다.
그다음에야 이런 생각을 한다.
“여기는 어떤 카페지?”
“가격은 얼마지?”
“무슨 메뉴가 유명하지?”
이때의 순서는 단순하다.
이미지 → 관심 → 텍스트 → 이해
그래서 여행지, 음식, 패션, 자동차처럼 보는 순간 감정이 움직이는 콘텐츠는 이미지를 왼쪽에 두는 것이 자연스럽다.
[ 멋진 이미지 ] [ 제목과 설명 ]이미지는 사람을 멈추게 하고,
텍스트는 멈춘 사람에게 이유를 설명한다.
즉, 이미지가 주인공이라면 먼저 보여준다.
텍스트를 왼쪽에 두는 경우
먼저 이해시키고, 나중에 보여준다
이번에는 은행 직원이 새로운 금융상품을 설명한다고 생각해보자.
아무 설명 없이 복잡한 그래프부터 보여준다면 사용자는 당황한다.
“그래서 이 숫자가 무슨 뜻이지?”
하지만 먼저 핵심을 말해주면 다르다.
매달 일정한 금액을 투자하면 가격 변동 위험을 줄일 수 있습니다.
그리고 오른쪽에 그래프를 보여준다.
사용자는 그래프를 보며 생각한다.
“아, 방금 설명한 내용을 그림으로 보여주는구나.”
이때의 순서는 다음과 같다.
텍스트 → 이해 → 이미지 → 확인
[ 제목과 설명 ] [ 화면·그래프·예시 ]소프트웨어 기능, 금융상품, 보안 서비스처럼 먼저 이해해야 가치가 보이는 콘텐츠는 텍스트를 왼쪽에 두는 편이 좋다.
즉, 이미지가 증거라면 설명 뒤에 보여준다.
이미지가 질문이면 왼쪽, 답이면 오른쪽
실무에서는 이것만 기억해도 된다.
이미지가 질문을 만든다면 왼쪽
새로운 제품 사진을 보고 사용자가 생각한다.
“이게 뭐지?”
“어떤 제품이지?”
이미지가 호기심을 만들고, 텍스트가 답을 준다.
[ 이미지: 이게 뭐지? ] → [ 텍스트: 이런 제품입니다 ]이미지가 답을 보여준다면 오른쪽
텍스트를 먼저 읽은 사용자가 생각한다.
“정말 그렇게 되는지 보여줘.”
오른쪽의 화면이나 그래프가 그 설명을 증명한다.
[ 텍스트: 이런 기능입니다 ] → [ 이미지: 실제로는 이렇게 됩니다 ]따라서 가장 간단한 기준은 다음과 같다.
이미지가 질문이면 왼쪽, 이미지가 답이면 오른쪽.
사람 얼굴은 화면 안쪽을 바라보게 한다
사람은 다른 사람의 시선을 따라가는 습성이 있다.
길에서 여러 사람이 갑자기 하늘을 바라보면,
우리도 무슨 일이 있는지 하늘을 보게 된다.
웹페이지에서도 마찬가지다.
오른쪽에 있는 인물이 화면 밖을 바라보면 사용자의 시선도 밖으로 빠질 수 있다.
[ 텍스트 ] [ 사람 → 화면 밖 ]반대로 인물이 왼쪽의 제목이나 버튼을 바라보면 사용자의 눈도 자연스럽게 그쪽으로 움직인다.
[ 제목·버튼 ] [ 사람 ← ]인물의 시선은 화면 안에 그려진 보이지 않는 화살표다.
따라서 사람 사진을 사용할 때는 얼굴이 다음 대상을 바라보게 하는 것이 좋다.
- 제목
- 핵심 설명
- 상품
- 신청 또는 구매 버튼
중요한 것은 사람이 어느 쪽에 있느냐보다,
어디를 바라보고 있느냐다.
버튼이 중요하다면 이미지보다 먼저 보여야 한다
배달 앱에서 음식을 주문한다고 생각해보자.
음식 사진이 아무리 멋져도 주문 버튼을 찾기 어렵다면 사용자는 불편하다.
사용자가 해야 할 행동이 명확한 화면에서는 텍스트와 버튼이 이미지보다 중요하다.
[ 핵심 문구 ]
[ 신청하기 버튼 ] [ 보조 이미지 ]이미지는 분위기를 만들 수 있지만,
버튼과 경쟁해서는 안 된다.
특히 회원가입, 다운로드, 구매, 상담 신청 페이지에서는 사용자가 다음 세 가지를 바로 알아야 한다.
무엇을 제공하는가?
나에게 어떤 이점이 있는가?
어디를 눌러야 하는가?
화면을 본 뒤 이 세 가지를 바로 알 수 없다면, 이미지의 좌우 위치보다 정보의 우선순위부터 다시 정해야 한다.
모바일에서는 좌우보다 순서가 중요하다
PC에서는 이미지와 텍스트를 좌우로 놓을 수 있다.
하지만 모바일에서는 결국 위아래로 쌓인다.
이때는 “이미지가 왼쪽인가, 오른쪽인가?”보다
무엇을 먼저 보여줄 것인가가 중요하다.
음식이나 여행처럼 감정을 먼저 움직여야 한다면 이미지가 위에 온다.
[ 이미지 ]
[ 제목과 설명 ]업무 도구나 금융상품처럼 의미를 먼저 알아야 한다면 텍스트가 위에 온다.
[ 제목과 핵심 가치 ]
[ 제품 화면 ]PC의 좌우 배치는 모바일에서 위아래 순서가 된다.
따라서 처음부터 다음 질문을 해야 한다.
사용자가 첫 화면에서 먼저 봐야 할 것은 무엇인가?
좌우를 무조건 번갈아 놓지 않는다
많은 웹사이트가 지루함을 피하려고 이미지와 텍스트를 번갈아 배치한다.
[ 이미지 ] [ 설명 ]
[ 설명 ] [ 이미지 ]
[ 이미지 ] [ 설명 ]보기에는 다양하지만, 읽는 사람의 시선은 계속 좌우로 이동해야 한다.
마트에서 사고 싶은 물건이 왼쪽 선반과 오른쪽 선반에 번갈아 놓인 것과 비슷하다.
구경할 때는 재미있지만 빠르게 비교하려면 피곤하다.
그래서 반복되는 기능 소개에서는 텍스트의 시작 위치를 일정하게 유지하는 편이 더 읽기 쉽다.
[ 설명 ] [ 이미지 ]
[ 설명 ] [ 이미지 ]
[ 설명 ] [ 이미지 ]시각적인 변화는 이미지로 만들고,
읽기의 출발점은 가능한 한 고정한다.
최종 판단 기준
이미지와 텍스트의 배치는 다음 네 가지 질문으로 결정할 수 있다.
1. 먼저 느껴야 하는가?
그렇다면 이미지를 먼저 보여준다.
이미지 → 감정 → 설명여행, 음식, 패션, 자동차, 인테리어에 적합하다.
2. 먼저 이해해야 하는가?
그렇다면 텍스트를 먼저 보여준다.
설명 → 이해 → 이미지소프트웨어, 금융, 보안, 업무 기능에 적합하다.
3. 사용자가 행동해야 하는가?
그렇다면 핵심 문구와 버튼을 먼저 보여준다.
가치 → 버튼 → 보조 이미지회원가입, 구매, 다운로드, 상담 신청 화면에 적합하다.
4. 사람 사진이 있는가?
그렇다면 얼굴이 핵심 콘텐츠를 바라보게 한다.
인물의 시선 → 제목·상품·버튼한 문장으로 정리하면
이미지와 텍스트의 위치를 고민할 때는 디자인부터 생각하지 말자.
사용자가 어떤 순서로 생각하기를 원하는지 먼저 결정하면 된다.
먼저 느끼게 하고 싶다면 이미지를 앞에 둔다.
먼저 이해시키고 싶다면 텍스트를 앞에 둔다.
이미지가 질문이면 왼쪽, 이미지가 답이면 오른쪽이다.
좋은 UX는 사람의 시선을 억지로 움직이는 디자인이 아니다.
사람이 원래 세상을 보고 이해하는 순서대로
이미지와 글을 놓아주는 것이다.