같은 요소는 같은 방식으로

KRDS SP-001 — 다양한 콘텐츠의 구성 요소를 일관성 있게 구성하고 있다.

0. 들어가며 — 서비스 패턴(SP)의 시작

이번 675편부터 서비스 패턴(Service Pattern, SP) 172개입니다. 846 규칙의 마지막 카테고리죠. 방문·검색· 로그인·신청·정책정보처럼, 사용자가 서비스를 이용하는 흐름·화면 단위의 패턴입니다. 첫 그룹은 ‘방문’(메인· 랜딩 페이지)이고요.

첫 편 SP-001은 — 다양한 콘텐츠의 구성 요소를 일관성 있게 구성하라는 규칙입니다. 캐러셀·탭·목록·링크 같은 요소가 — 화면마다 제각각이면 사용자가 헷갈리죠. 이번 편을 풀어냅니다.

1. 원문 — 콘텐츠 구성 요소 일관성

SP-001 (서비스 패턴 > 방문) “다양한 콘텐츠의 구성 요소를 일관성 있게 구성하고 있다. (콘텐츠 구성 요소: 캐러셀, 탭, 목록과 더보기 링크, 기타 링크 및 버튼)”

캐러셀·탭·목록·링크 등 콘텐츠 구성 요소를 일관성 있게 구성하라는 뜻입니다.

정리: 콘텐츠 구성 요소(캐러셀·탭·목록·링크)를 일관되게 구성하라. 이게 SP-001입니다.

2. 왜 구성 요소 일관성인가

방문(메인) 페이지는 다양한 콘텐츠 요소로 채워집니다: 배너 캐러셀, 콘텐츠 탭, 목록 + ‘더보기’ 링크, 각종 링크·버튼 등. 이 요소들이 일관되게 구성돼야, 사용자가 학습한 대로 쉽게 쓰죠. SP-001은 일관성을 요구합니다.

구성 요소가 제각각일 때의 문제:

학습 무력화 같은 종류 요소(예: 목록 + 더보기)가 화면·섹션마다 다르게 생기고 동작하면, 사용자가 한 번 익힌 걸 다음에 못 씁니다. 매번 새로 익혀야 하죠.

혼란 캐러셀이 어떤 데는 자동회전, 어떤 데는 수동, 컨트롤 위치도 제각각이면, 사용자가 혼란스럽습니다.

신뢰 저하 — 들쭉날쭉한 요소는 — 사이트가 정돈 안 된 인상을 줘, 신뢰가 떨어지죠.

그래서 SP-001은 — 일관된 구성을 요구합니다:

같은 요소 = 같은 형태·동작 같은 종류의 콘텐츠 요소는, 사이트 전반에서 같은 형태·위치·동작으로요. 목록 + ’더보기’는 어디서나 같은 방식, 캐러셀은 같은 컨트롤·동작으로요.

디자인 시스템 컴포넌트 활용 — 캐러셀(CP-208~226), 탭(CP-227~237), 텍스트 목록(CP-228~234), 링크·버튼(CP-235~

등 — 표준 컴포넌트를, 일관되게 사용합니다. 컴포넌트 규칙을 — 지키면 자연히 일관되죠.

일관된 패턴 ‘더보기’ 링크의 위치·표현, 섹션 헤더의 형태, 카드의 구조 등 반복되는 패턴을 통일합니다.

일관성 = 예측 가능성·학습 전이. 일관된 구성은 사용자에게 예측 가능성을 줍니다. 한 번 익힌 사용법이, 다른 곳에도 적용되죠(학습 전이). 일관성은 UX의 핵심 원칙입니다(WCAG 3.2.3·3.2.4 일관성).

방문 페이지의 첫인상. 메인 페이지는 사용자의 첫인상입니다. 구성 요소가 일관되고 정돈되면, 사용자는 ’잘 만든 사이트’로 느끼고 신뢰하죠. 첫 그룹 ’방문’의 출발점다운 규칙입니다.

이 규칙은 방문(SP)의 ’구성 일관성’을 담당합니다 — 콘텐츠 구성 요소를 일관되게 구성해(001), 사용자가 학습한 대로 쉽게 쓰고 신뢰하게 하죠. 서비스 패턴의 출발점입니다.

정리하면 — 캐러셀·탭·목록·링크 등 콘텐츠 요소가 화면마다 제각각이면 학습이 무력화되고 혼란스러우므로, 같은 종류 요소를 일관된 형태·동작(표준 컴포넌트)으로 구성해야 합니다.

3. 점검 / 개선

무엇을 점검하나

같은 요소 일관 — 같은 종류 요소(목록·캐러셀 등)가 일관된 형태·동작인가.

표준 컴포넌트 — 캐러셀·탭·목록·링크가 표준 컴포넌트 규칙을 따르는가.

패턴 통일 — ‘더보기’·섹션 헤더·카드 등 반복 패턴이 통일되는가.

개선 방향

같은 종류 요소를 같은 형태·위치·동작으로(표준 컴포넌트 활용).

‘더보기’·헤더·카드 패턴 통일. 일관성(WCAG 3.2.3/3.2.4).

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
디자이너	구성 요소 일관 디자인
퍼블리셔/개발	표준 컴포넌트 일관 구현

기관 유형	SP-001 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (방문·메인 페이지)

메인·콘텐츠 페이지가 있는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 같은 종류 요소(목록·캐러셀 등)가 일관된 형태·동작인가요?

□ 캐러셀·탭·목록·링크가 표준 컴포넌트 규칙을 따르나요?

□ ‘더보기’·섹션 헤더·카드 등 반복 패턴이 통일되나요?

❓ FAQ

Q1. 서비스 패턴(SP)이 컴포넌트(CP)와 뭐가 다른가요? CP는 개별 컴포넌트(버튼·탭 등)의 규격, SP는 그것들을 조합한 서비스 흐름·화면(방문·검색·신청 등)의 패턴입니다. SP-001은 화면에서 컴포넌트를 일관되게 쓰라는 거죠. Q2. 구성 요소 일관성이 왜 중요한가요? 같은 요소가 화면마다 다르면 한 번 익힌 사용법을 못 씁니다. 일관되면 학습이 전이돼 쉽게 쓰고 신뢰하죠. Q3. 어떻게 일관성을 확보하나요? 표준 컴포넌트(캐러셀·탭·목록·링크 규칙)를 일관 적용하고, ‘더보기’·헤더·카드 같은 반복 패턴을 통일하면 됩니다.

6. 마무리

SP-001의 메시지:

같은 요소는 같은 방식으로 — 콘텐츠 구성 요소를 일관성 있게 구성하라.

콘텐츠 요소가 화면마다 제각각이면 학습이 무력화되고 혼란스럽습니다. 같은 종류 요소를 일관된 형태·동작(표준 컴포넌트) 으로 구성하는 게 핵심이죠. 다음 편은 시급·중요 정보 빠른 인지입니다.

다음 편 예고 ▶ 「676. (SP-002) 시급하거나 중요한 정보를 사용자가 빠르게 인지할 수 있도록 제공하고 있다.」

ViewCheck는 콘텐츠 구성 요소가 일관성 있게 구성되는지를 진단합니다.

📚 참고 출처

KRDS 서비스 패턴 — 방문 가이드 — https://www.krds.go.kr/html/site/service/service_01.html

WCAG 2.1 SC 3.2.3 Consistent Navigation / 3.2.4 Consistent Identification — https://www.w3.org/WAI/WCAG21/Understanding/

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준