유사성 원리와 같은 역할의 시각적 언어

같은 표시는 같은 상태일까요?

콘텐츠 검토함에 소개 페이지, 공지 원고, 자주 묻는 질문이 있습니다. 오늘 할 일은 승인된 문서를 모아 배포 준비를 하고, 아직 검토 중인 문서에는 필요한 다음 동작을 찾는 것입니다. 첫 과제는 상태를 읽는 일이고 두 번째 과제는 무엇을 할 수 있는지 구분하는 일입니다. 둘을 같은 표시 하나로 처리해도 괜찮을까요?

기존 닮은 표식에도 역할은 다릅니다 종이에 찍힌 체크는 상태이고 · 장면 자료 보기

닮은 표식에도 역할은 다릅니다

종이에 찍힌 체크는 상태이고 손에 쥘 도장은 행동 도구입니다. 초록색을 공유한다는 이유로 같은 역할이라고 설명할 수는 없습니다. 실제 검토함의 화면을 재현한 사진은 아닙니다.

기존 가상 예시에는 두 가지 충돌이 있습니다. 승인 완료인 첫 문서는 초록 원, 또 다른 승인 완료 문서는 파란 사각형으로 표시됩니다. 반대로 첫 문서의 완료 표시와 둘째 문서의 ‘승인 요청’ 동작은 같은 초록 원을 씁니다. 같은 상태는 다르게 보이고, 상태와 동작은 같아 보이는 셈입니다. 표식 옆에 문구도 없어 아래 범례를 찾아야 합니다. 이 글에서는 같은 사례에 라벨을 되돌린 뒤에도 어떤 충돌이 남는지 살펴봅니다.

화면을 보기 전에 잠깐 같은 간격의 도형을 비교해 보세요. 이것은 실제 검토함의 사용성을 시험하는 실험이 아닙니다. 반복되는 모양을 무엇의 공통점으로 읽는지 생각하기 위한 관찰입니다. 자신의 답을 기록하거나 점수를 매길 필요는 없습니다.

모양을 바꾸면 무엇이 함께 보이나요?

처음에는 원 12개가 세 줄에 놓입니다. 가로줄마다 모양을 바꾸거나 세로줄마다 모양을 바꾸어 보세요. 어느 요소들이 함께 보이나요? 그 묶음을 말로 설명해 보고, 바뀐 것이 도형의 중심 위치인지 모습인지 구분해 보세요. 조작하지 않고 읽고 싶다면 각 배열의 설명을 펼쳐볼 수 있습니다.

가로줄 모드는 같은 줄 안에서 모양을 맞추고, 세로줄 모드는 같은 열 안에서 모양을 맞춥니다. 세로줄 모드에서는 첫째와 넷째 열도 원으로 같습니다. 모양이 바뀌어도 요소 수와 중심 간격은 그대로입니다. 여기서 간격 48과 도형 상자 20은 SVG 원본 좌표의 단위이며, 반응형 화면에서 측정한 CSS 픽셀이나 기기의 물리적 길이를 뜻하지 않습니다. 이 도해에서 바꾼 단서는 확인할 수 있지만, 당신이 실제로 무엇을 한 묶음으로 보았는지는 배열의 이름만으로 확정할 수 없습니다.

어느 쪽이 정답이라는 표시가 없는 이유도 여기에 있습니다. 직접 만든 12개 도형은 원 논문의 그림을 복사한 것이 아니며, 화면 크기와 모양의 두드러짐을 교정한 실험 자극도 아닙니다. 처음에는 한 방향이 눈에 들어왔다가 주의를 옮겨 다른 묶음을 볼 수 있습니다. 중요한 것은 여기서 확인한 배열 변화와 자신의 지각 설명을 구분하는 것입니다.

같이 보이는 것과 같은 뜻은 어떻게 다른가요?

유사성 원리는 다른 조건이 같을 때 색, 형태, 크기 같은 시각적 속성이 닮은 요소들이 묶여 보이는 경향을 설명합니다. 현재 직접 확인한 Wertheimer 자료는 1923년 독일어 논문에 대응하는 1938년 영어 번역의 온라인 전사입니다. II절에서는 간격을 같게 둔 채 요소의 속성을 바꾸어 유사성을 설명하고, III절에서는 다른 묶음 단서가 협력하거나 경쟁하는 경우를 다룹니다. 독일어 원저 전문을 직접 읽었다는 뜻은 아닙니다. [S1]

Wagemans와 동료들의 현대 리뷰도 유사성을 다른 지각 묶음 단서들과 함께 다룹니다. 유사한 색이나 모양이 중요한 경우가 있어도 모든 배열에서 다른 단서보다 강한 것은 아닙니다. 가까운 요소가 서로 닮은 요소와 다른 묶음을 제안할 수도 있습니다. 그래서 ‘색은 언제나 거리보다 강하다’처럼 하나의 서열을 제품 전체에 적용하지 않습니다. [S2]

이제 검토함으로 돌아오면 질문이 바뀝니다. 초록 원들이 함께 보이는 것과 그 원이 승인 완료를 뜻한다는 것은 다른 판단입니다. 사람은 모양의 공통점을 볼 수 있지만, 승인 절차의 어느 단계인지 알려면 문구와 사용 규칙이 필요합니다. 유사한 모습은 의미를 정하는 일을 대신하지 않습니다.

실제 동작은 한 단계 더 확인해야 합니다. 어떤 요소가 버튼처럼 보여도 구현에 버튼 역할과 키보드 동작이 없으면 조작 가능한 버튼이 되지 않습니다. 반대로 상태 배지가 실제 버튼이 아니라면 눌러야 한다는 기대를 주지 않는 편을 검토할 수 있습니다. 지각적 묶음, 제품의 의미, 구현의 역할을 나누면 무엇을 테스트할지도 구체적으로 정할 수 있습니다. [S3]

상태와 동작의 스타일을 어떻게 정할까요?

중간안에는 라벨을 다시 붙였습니다. 소개 페이지와 자주 묻는 질문에는 ‘승인 완료’, 공지 원고에는 ‘검토 중’과 ‘승인 요청’이 보입니다. 이제 뜻을 글로 읽을 수는 있습니다. 하지만 두 완료 배지의 모양은 여전히 다르고, 승인 요청 동작은 첫 완료 표시와 같은 초록 원입니다. 이름을 보충하는 일과 상태·동작의 표현 체계를 정리하는 일은 별도의 수정입니다.

변경안은 같은 승인 완료 상태에 체크 기호와 같은 문구를 가진 배지를 씁니다. 검토 중은 시계 기호와 검토 중 문구를 가진 배지로 표시합니다. 상태 정보는 상태 열에서 읽고, 승인 요청은 별도 동작 열에서 확인합니다. 색을 읽지 못해도 이름과 기호, 배지와 버튼형 표현의 차이가 남습니다. 어떤 상태가 같은지 먼저 정한 뒤 그 공통점에 같은 스타일을 연결한 것입니다.

이 체계는 스타일 표에서 색 이름만 맞추는 일보다 구체적입니다. 고객 화면의 진행 중과 관리자 화면의 처리 중이 실제로 같은 단계인지 먼저 확인해야 합니다. 데이터의 의미가 다르면 같은 색을 붙여 잘못된 연속성을 기대하게 할 수 있습니다. 컴포넌트 문서에는 ‘검토가 끝난 항목의 상태를 알린다’처럼 역할, 사용 조건과 사용하지 않을 맥락을 남겨 보세요.

비교에서는 문구, 기호, 모양, 위치와 역할 구별이 함께 바뀌었습니다. 승인 완료 문서만 찾는 과제와 검토 중 문서에서 승인 요청 동작을 찾는 과제를 나누고, 잘못 고른 행이나 배지를 눌러 보려는 행동, 범례를 다시 찾는 행동을 관찰할 수 있습니다. 이 결과가 좋아져도 유사성 하나가 원인이었다고 말하려면 다른 변화를 분리한 비교가 더 필요합니다.

수정에는 비용도 있습니다. 기존 이용자가 익숙한 표시를 다시 익혀야 하고, 여러 화면에서 상태 이름과 컴포넌트 사용 규칙을 맞춰야 합니다. 색, 크기, 모서리, 그림자를 모두 바꾸면 중요도 차이까지 새로 읽힐 수 있습니다. 행 높이와 본문 크기를 안정적으로 두고, 필요한 상태 차이를 문구와 식별 기호로 표현하는 안부터 비교하면 무엇을 바꿨는지 설명하기 쉬워집니다.

색과 정렬만으로 의미가 충분할까요?

W3C의 WCAG 2.2 해설은 이런 구현 판단의 범위를 더 분명하게 해 줍니다. SC 1.4.1은 의미, 동작, 응답 등을 구분하는 유일한 시각적 수단으로 색을 쓰지 않도록 설명합니다. 승인 완료에는 문구와 체크가 남아야 하며, 기한 초과도 색 이외의 보이는 단서가 있어야 합니다. 화면읽기 프로그램용 설명만 추가하고 시각 화면은 색만 남겨 두면 색을 구분하기 어려운 이용자에게 필요한 단서가 부족할 수 있습니다. [S4]

SC 1.3.1의 해설은 표현으로 전달한 정보, 구조와 관계를 프로그램으로 판별 가능하게 하거나 텍스트로 제공하도록 설명합니다. 검토함의 상태 열과 동작 열도 시각적으로만 떨어뜨리지 말고, 이름과 각 행의 관계가 구현에서 이어지는지 확인해야 합니다. 같은 컴포넌트를 재사용했다고 모든 화면의 HTML 역할이나 접근 가능한 이름, 키보드 동작이 같다고 가정하지 않습니다. [S3]

두 자료는 접근성 기준을 설명하는 해설입니다. 이 검토함의 접근성을 인증한 자료는 아닙니다. 좁은 화면과 큰 글자, 긴 문구에서도 상태와 동작의 관계가 유지되는지, 키보드와 화면읽기 프로그램으로 각각 읽고 사용할 수 있는지 확인하세요.

하나의 문서가 두 상태를 갖는다면?

공지 원고는 ‘검토 중’이면서 동시에 ‘기한 초과’일 수 있습니다. 두 말은 같은 상태의 다른 이름이 아니라 검토와 기한이라는 서로 다른 속성입니다. 색 하나로 둘을 합치면 무엇을 알리는지 모호해질 수 있습니다. 검토 상태, 기한 상태, 가능한 동작을 각각 이름이 있는 위치에서 읽도록 구성하세요. 같은 모양을 반복하기 전에 무엇이 같고 무엇이 다른지부터 분명하게 해야 합니다.

긴 제목, 여러 배지, 선택된 행과 비활성 동작이 동시에 있는 경우도 살펴봐야 합니다. 모든 요소를 같은 모습으로 만들면 오류나 선택 상태, 중요도가 사라질 수 있습니다. 링크 모양이 같다고 목적지가 같은 것은 아니고, 모든 버튼이 같은 위험을 가진 것도 아닙니다. 결과가 큰 동작은 그 결과를 설명하고 상황에 필요한 보호 장치를 검토합니다. 일관성 때문에 필요한 차이를 지우지 않습니다.

출처의 차이도 보존해야 합니다. 광고와 추천을 사용자가 작성한 문서처럼 꾸미거나, 시스템 알림을 독립적인 검토 결과처럼 보이게 해서는 안 됩니다. 같은 카드 시스템을 써도 광고 여부나 추천 이유처럼 판단에 필요한 표시는 남겨야 합니다. 친숙한 모습이 다른 출처의 신뢰를 빌려 오게 하지 않는 것입니다.

실제 결과가 아직 확인되지 않았을 때도 마찬가지입니다. 진행 중인 요청을 완료 배지와 비슷하게 꾸미면 사용자가 일이 끝났다고 오인할 수 있습니다. 승인 요청이라는 동작과 승인 완료라는 결과는 다른 사건입니다. 전송, 결제, 취소처럼 결과가 중요한 과정에서는 현재 상태와 불확실성을 문구로 알려야 하며, 이 글의 표시 전환으로 실제 결과를 확인할 수는 없습니다.

예약과 결제 상태를 어떻게 나누겠어요?

이번에는 가상의 예약 목록을 떠올려 보세요. 첫 예약은 예약 확정이지만 결제 대기이고, 둘째 예약은 예약 대기지만 결제 완료입니다. 두 행 모두 초록 원 하나만 있다면 그 원을 같은 상태라고 설명할 수 있을까요? 어떤 문구와 기호를 공유하고 어떤 속성을 따로 보여 줄지 자기 말로 정해 보세요.

기존 예약과 결제를 따로 읽습니다 첫 묶음은 예약만 확정, 둘째 · 장면 자료 보기

예약과 결제를 따로 읽습니다

첫 묶음은 예약만 확정, 둘째 묶음은 결제만 완료라는 설명용 기호입니다. 같은 초록 체크라도 어느 속성에 붙었는지 확인해야 필요한 다음 행동이 달라집니다.

판단의 출발점은 예약 상태와 결제 상태를 나누는 것입니다. 같은 결제 완료끼리는 같은 표현을 쓸 수 있지만, 예약 확정과 결제 완료를 한 상태로 합치면 필요한 차이가 사라집니다. 그다음 ‘예약이 확정된 항목 찾기’와 ‘아직 결제할 항목 찾기’를 다른 과제로 확인합니다. 스타일이 깔끔한지뿐 아니라 사용자가 어떤 의미를 읽고 어떤 동작을 기대하는지 관찰하는 과제로 옮겨 간 것입니다.

확인해볼 질문

• 같은 스타일이 제품 전체에서 같은 역할이나 상태를 뜻하는가
• 색을 구분하기 어려워도 문구와 추가 단서로 상태를 읽을 수 있는가
• 버튼·링크·배지의 시각적 기대와 실제 역할이 일치하는가
• 중요한 차이와 불확실한 결과를 일관성이라는 이유로 가리지 않았는가

어떤 근거를 어디까지 읽었나요?

이 글은 유사성에 따른 묶음 지각의 설명, 접근성 공식 해설, 자체 가상 UI의 적용 가설을 나누어 사용했습니다. 유사한 스타일이 학습 시간이나 오류율을 일정 비율로 줄인다는 수치는 제시하지 않습니다. 도형을 조작한 결과도 독자의 지각 성과나 실제 승인 상태를 측정한 결과가 아닙니다.

Wertheimer의 독일어 원저는 1923년 자료이며 현재 출판사 페이지에서는 서지만 확인했습니다. 개념 설명은 1938년 영어 번역의 관련 절을 읽은 범위입니다. Wagemans 리뷰는 2012년 7월 30일 Online First PDF의 지각 묶음과 단서 관계 관련 절을 확인했고, W3C 자료의 2025년·2026년은 해설 페이지 갱신 연도입니다. 각 자료의 읽은 범위와 한계는 참고 자료 패널에 함께 남겼습니다.

도형 배열과 검토함은 이 글을 위해 만든 교육용 예시입니다. 연구의 원래 자극이나 실제 서비스 화면이 아니며, 사용자의 이해나 오류 감소를 측정한 자료도 아닙니다.