병치: 나란히 놓기 전에 무엇을 비교할지 정하기

왼쪽은 월 요금, 오른쪽은 연 요금

가상의 서비스 요금 비교 화면입니다. 두 상품 카드가 나란히 있고 숫자의 크기도 같습니다. 왼쪽에는 월 요금이, 오른쪽에는 연간 결제 금액이 표시돼 있습니다. 작은 설명을 읽지 않으면 같은 단위의 가격처럼 보일 수 있습니다.

나란히 있어도 비교하는 기간은 다를 수 있다

두 견적이 곁에 있다는 점보다 각 금액이 어느 기간을 뜻하는지 먼저 보세요. 본문 A는 월 12,000원, B는 연 120,000원이고 오늘 청구 금액도 다릅니다. 이미지의 추상 화면으로 실제 가격을 읽거나 월 환산을 오늘의 결제로 바꿀 수는 없습니다.

지금은 한 명이 한 달만 써 보고, 오늘 20,000원 이하를 내려고 합니다. 두 숫자만 보고 어느 상품이 이 조건에 맞는지 판단해도 될까요? 아래 카드에서 먼저 근거를 찾아보세요.

병치(juxtaposition)는 이런 문제를 자동으로 해결하는 효과가 아닙니다. 무엇을 나란히 놓고 어떤 관계를 드러낼지 정하는 구성 방법입니다. 그 첫 단계는 두 대상을 고르는 것보다 비교할 속성을 정하는 데 있을 수 있습니다.

여기서 ‘대응하는 속성’은 A의 저장 공간과 B의 저장 공간처럼 같은 질문에 답하는 값을 뜻합니다. 가까운 두 값이 A의 사용자 수와 B의 저장 공간이라면, 가까이 놓였다는 이유로 비교할 수는 없습니다. 이제 가격에 같은 질문을 해보겠습니다.

월 환산과 오늘의 결제는 서로 다른 질문입니다

두 가격이 다르다는 사실을 발견하는 것과 어떤 상품이 자신의 목적에 맞는지 판단하는 것은 다릅니다. 금액이 같은 단위로 표시돼도 제공 기능과 계약 조건이 다르면 결론은 달라질 수 있습니다. 비교 화면은 무엇을 같게 맞췄고 무엇이 다른지 드러내야 합니다.

월 환산은 여러 달의 금액을 한 달 기준으로 나누는 계산입니다. B의 연간 120,000원을 12개월로 나누면 월 환산 10,000원입니다. 한 달 기준으로 비교할 때 쓸 수 있는 값이지만, 오늘 내야 하는 돈은 여전히 120,000원입니다. 그래서 환산 값 옆에 실제 청구 총액과 결제 주기도 함께 남겨야 합니다.

원래 도해와 설명 · 결제 기간

질문의 기간이 바뀌면 같은 요금의 비교도 달라진다

왼쪽 질문에서는 A가 오늘의 예산에 맞고 오른쪽 질문에서는 B의 12개월 총액이 적습니다. 이용 기간과 오늘의 실제 지출을 구별해야 같은 숫자의 뜻을 설명할 수 있습니다. 세금·약정·환불 조건은 본문대로 남기고 이 가상 계산을 특정 상품 견적으로 사용하지 않습니다.

처음 질문의 예산에 대입하면 A는 오늘 12,000원을 내므로 20,000원 이내입니다. 이 예시에서는 다음 달 갱신을 중단할 수도 있습니다. B는 오늘 120,000원을 내야 하고 12개월분을 일시 결제하므로, 월 환산 금액이 더 낮아도 이번 한 달 체험과 오늘의 예산 조건에 맞지 않습니다. 이것은 이 과제의 판단이지 모든 사용자에게 A가 더 좋은 상품이라는 결론은 아닙니다.

변경 전과 변경안: 상품보다 비교 기준을 먼저 정렬하기

다음은 가상의 요금 비교 화면을 바꾸는 제안입니다. 실제 서비스 가격이나 결제 조건이 아니며, 원화 금액을 특정 상품의 견적으로 제시하지 않습니다.

변경 전은 상품 A와 B를 독립된 카드로 만듭니다. A는 요금, 사용자 수, 저장 공간 순서이고 B는 저장 공간, 제공 기능, 요금 순서입니다. 카드의 높이도 달라 같은 줄의 내용이 서로 대응하지 않습니다. 각 카드는 매력적으로 보일 수 있지만 비교하려면 사용자가 같은 속성을 찾아 옮겨 다녀야 합니다.

변경안은 비교 기준을 맞춥니다. 요금의 결제 주기와 세금 포함 여부를 같은 방식으로 표시하고, 사용자 수와 저장 공간, 핵심 기능을 같은 순서에 둡니다. 연간 요금을 월 단위로 환산해 보여 준다면 ‘월 환산’이라고 표시하고 실제 청구 총액과 결제 주기도 유지합니다. 낮은 숫자를 강조하려고 실제 결제 금액을 숨기지 않습니다.

정확히 대응하지 않는 기능에는 억지로 체크 표시를 넣지 않습니다. 제공 범위가 제한되면 그 조건을 쓰고, 정보가 확인되지 않으면 미확인으로 남깁니다. 미확인을 미제공이나 무료로 바꾸어 해석하지 않도록 해야 합니다.

좁은 화면에서는 카드 두 개를 그대로 축소하는 대신, 비교 속성 하나씩 두 상품 값을 이어 보여 주는 방법을 검토할 수 있습니다. 중요한 것은 좌우라는 위치 자체보다 대응 관계를 유지하는 것입니다. 화면을 읽어 주는 방식에서도 어떤 값이 어느 상품의 어느 속성인지 확인할 수 있어야 합니다.

이 비교는 순서, 단위, 라벨, 반응형 구성을 함께 바꿉니다. 사용자가 선택을 잘했다면 병치 하나의 순수 효과로 읽지 않습니다. 어떤 정보를 찾고 어떤 조건을 놓쳤는지 실제 과제로 확인하는 적용 제안입니다.

좁은 화면에서 ‘오늘 청구 금액’ 아래에 ‘상품 A: 12,000원’, ‘상품 B: 120,000원’처럼 값을 이어 놓으면 좌우 배치를 유지하지 않아도 관계를 읽을 수 있습니다. 속성 이름과 상품 이름을 값과 함께 남기는 방법입니다. CSS로 두 칸을 한 칸으로 바꿨다는 사실만으로 보조기술에서도 이 관계가 전달된다고 보증할 수는 없습니다. 실제 읽기 순서·이름·확대는 따로 확인해야 합니다.

나란히 보기에도 여러 방식이 있습니다

L’Yi·Jo·Seo의 2020년 비교 레이아웃 연구는 대상을 나란히 두기, 겹쳐 보기, 차이 등의 관계를 직접 표현하기를 구분합니다. 그중 4.3절은 차트 전체를 곁에 놓는 방식(chart-wise juxtaposition)과 대응하는 요소를 곁에 놓는 방식(item-wise juxtaposition)을 나눕니다. 둘 다 병치이지만 무엇을 배치 단위로 삼느냐가 다르므로, 같은 과제에서도 대응 항목을 찾고 읽는 방식이 달라질 수 있습니다. L’Yi 외,2020, 분류와 정의

원래 도해와 설명 · 차트 배치

전체 흐름과 같은 달의 대응을 비교하기

2월의 차이를 묻는다면 대응 막대의 6과 7을 곁에 볼 수 있고, 전체 흐름을 묻는다면 두 대상의 세 달 순서를 살필 수 있습니다. 배치 단위가 달라졌다는 설명이며 한 방식이 항상 더 빠르다는 결과가 아닙니다.

예를 들어 두 개의 월별 그래프를 좌우에 놓는 것과, 한 그래프 안에서 같은 달의 두 막대를 바로 붙여 놓는 것은 다릅니다. 전자는 각각의 흐름을 보기에 적합할 수 있고, 후자는 특정 달의 대응 값을 찾는 데 초점을 둘 수 있습니다. 실제로 어떤 방식이 나은지는 과제와 데이터, 화면 조건을 정해 검토해야 합니다.

이 연구는 기존 연구들의 일치하는 결과와 충돌하는 결과, 적용상 장단점을 함께 다룹니다. 따라서 이 글에서도 ‘나란히 놓으면 항상 더 빨리 이해한다’는 단일 법칙을 만들지 않습니다. 비교할 대상과 관계가 무엇인지 더 정확하게 말하는 데 연구의 분류를 사용합니다. 같은 연구, 초록·논의

차트 전체를 보존하면 각 대상의 전체 흐름을 별도로 살필 수 있습니다. 대응 막대를 묶으면 ‘2월 A와 B가 얼마나 다른가’처럼 특정 항목을 묻는 배치를 설명할 수 있습니다. 이것은 배치 대상과 과제를 구분하는 말입니다. 어떤 과제에서도 후자가 우월하다는 보장은 아닙니다. 앞의 가격표에 적용한 속성별 행은 이 구분에서 생각할 관점을 가져온 편집 설계안이며, 논문이 시험한 가격 UI가 아닙니다.

데이터 시각화에서는 축의 단위와 범위가 중요합니다. 두 그래프의 모양이 비슷해도 한쪽 축이 훨씬 좁은 범위라면 변화량이 같은 것은 아닙니다. 축을 반드시 항상 같게 해야 한다는 단순 규칙보다는 어떤 비교를 돕는지에 맞춰 결정하고, 다르게 쓰면 그 차이를 분명히 표시해야 합니다.

본문 비교도 마찬가지입니다. 삭제된 문장을 찾는 데에는 두 버전을 나란히 놓는 방식이 유용할 수 있지만, 문단이 여러 페이지 이동했다면 단순한 위치 대응이 깨집니다. 눈앞에서 서로 마주 보는 항목이 정말 같은 항목인지 확인할 필요가 있습니다.

실제 문서: GitHub의 두 가지 변경 보기

 결제 방식
− 매월 결제
+ 연간 결제

매월 결제

연간 결제

차이만 보여 주는 기능이 놓칠 수 있는 것

서로 다른 부분만 강조하면 비교가 빨라질 가능성은 있습니다. 하지만 그 차이를 해석하는 데 필요한 공통 조건까지 사라질 수 있습니다. 앞의 두 상품은 세금 포함·저장 공간 100GB·기본 기능이 같지만 결제 주기와 약정 조건은 다릅니다. 같은 조건을 생략하거나 계약 차이를 월 환산 숫자 뒤로 감추면 금액의 의미를 놓칠 수 있습니다. 차이의 맥락은 남겨 두는 편을 검토하세요.

또한 나란히 놓는 순서도 완전히 중립적인 배경이라고 가정할 수는 없습니다. 특정 상품을 먼저 보거나 크게 보게 하는 표현이 섞여 있을 수 있습니다. 이 글에서는 위치가 일정한 선호 효과를 만든다고 주장하지 않지만, 제품 비교를 평가할 때 배치와 강조를 함께 기록할 이유는 있습니다.

비교표를 만드는 사람이 선택한 속성도 결과에 영향을 줄 수 있습니다. 장점이 드러나는 행만 넣고 중요한 제한을 빼면 표가 정돈돼 있어도 공정한 비교가 되기 어렵습니다. 독자가 실제로 결정할 때 필요한 속성을 먼저 정하고, 누락한 항목의 이유를 검토해 보세요.

추가 조건이 달라지는 다른 비교라면 어떨까요? 한 상품만 할인 전 금액을 취소선으로 표시하고 다른 상품은 세금을 제외했다면, 사용자는 여러 조건을 머릿속에서 다시 계산해야 합니다. 앞의 A/B는 모두 세금 포함이므로 이 문제까지 생긴 사례로 읽지는 않습니다.

어떤 질문으로 검토할까

‘어느 화면이 보기 좋나요?’ 외에 구체적인 과제를 줄 수 있습니다. 이 가상 비교에서는 ‘실제로 오늘 얼마를 결제하는지 확인해 주세요’, ‘두 명이 함께 쓸 수 있는 상품을 찾아 주세요’, ‘아직 확인할 수 없는 조건을 말해 주세요’ 같은 질문이 가능합니다. 비교가 잘되면 무엇을 정확히 알 수 있어야 하는지 먼저 정하는 방법입니다.

정확도와 탐색 과정도 함께 봅니다. 답을 맞혔어도 화면을 계속 오가며 값을 외웠는지, 대응하는 행을 바로 찾았는지 다를 수 있습니다. 반대로 빠르게 답했다고 해서 세금이나 결제 주기를 이해한 것은 아닐 수 있습니다. 짧은 시간 하나로 모든 이해를 대표하지 마세요.

나란히 보기와 겹쳐 보기, 차이 직접 표시를 비교한다면 각 방식의 읽는 법에 익숙해질 기회도 고려해야 합니다. 처음 보는 복잡한 표시가 느렸다는 사실만으로 방식 자체가 모든 과제에서 열등하다고 단정하지 않습니다. 실제 사용 빈도와 숙련 수준을 정해 평가할 필요가 있습니다.

전후 화면을 실제로 검토할 때는 같은 상품 정보와 같은 질문을 주고, 오늘의 금액·기간 총액·미확인 조건을 각각 설명하게 해보세요. 여기서는 단위, 라벨, 행 순서, 반응형을 함께 바꾸었습니다. 오류가 줄었다는 결과가 나와도 그 묶음의 결과이지 병치 하나의 효과 크기는 아닙니다. 한 변수가 원인인지 알려면 그 변수를 달리한 비교와 충분한 검증이 필요합니다.

확인해볼 질문

• 같은 줄이나 가까운 위치에 놓인 값이 실제로 같은 속성에 답하는 항목인가요?
• 단위·기간·범위·세금·조건을 같은 기준으로 맞췄나요? 다르다면 그 차이를 밝혔나요?
• 누락·미확인·미제공을 구분했나요?
• 좁은 화면과 보조기술에서도 어느 상품의 어느 속성인지 읽을 수 있나요?
• 병치 외의 표현을 선택할 이유가 있는지 실제 과제로 비교했나요?

나란히 놓기 전에 어떤 질문에 답하게 할지 정해 보세요. 그 질문이 같아야 두 대상의 차이도 제대로 읽을 수 있습니다.

공간 요금도 인원과 이용량을 함께 맞춘다

본문 새 과제에서는 A의 매주 1시간·1명과 B의 월 2회·2명을 같은 제공량으로 바로 비교할 수 없습니다. 사진 속 안내물은 그 차이를 떠올리기 위한 가상 장면입니다. 한 회의 시간, 예약 가능 횟수와 미확인 취소 조건을 알아야 비교할 질문을 완성할 수 있습니다.

근거의 범위

이 글에서 병치는 비교할 정보를 나란히 놓는 구성 방법을 뜻합니다. 특정 위치가 선택을 바꾼다는 독립적인 심리 효과로 다루지 않습니다. 비교 레이아웃 리뷰와 공식 기능 설명을 사용했으며 가상의 가격 비교에 검증된 효과 크기를 부여하지 않았습니다.