지금 조작 중인 것은 위로 떠올려라

KRDS DS-098 — 셀렉트 레이어의 계층을 콘텐츠 위로 배치하여 상호작용 중인 요소를 시각적으로 구분하고 있다.

0. 들어가며 — 펼쳐지는 레이어의 계층

이번 98편은 셀렉트(드롭다운) 레이어 같은 펼쳐지는 요소의 계층입니다 — 콘텐츠 위로 배치.

셀렉트(드롭다운), 날짜 선택기, 자동완성 목록 등은 클릭하면 펼쳐져 다른 콘텐츠 위에 나타납니다. 이때 이 펼쳐진 레이어가 아래 콘텐츠에 가려지면 선택지를 못 보죠. DS-098은 이런 상호작용 중인 레이어를 콘텐츠 위층에 배치해 명확히 구분하라고 규정합니다. 이번 편은 상호작용 레이어의 계층을 풀어냅니다.

1. 규칙 원문 — 콘텐츠 위 배치

DS-098 (디자인 스타일 > 엘리베이션) “셀렉트 레이어의 계층을 콘텐츠 위로 배치하여 상호작용 중인 요소를 시각적으로 구분하고 있다.”

펼쳐지는 셀렉트 레이어를 아래 콘텐츠보다 위층에 배치해, 지금 조작 중인 요소를 구분하라는 뜻입니다.

정리: 셀렉트 등 상호작용 레이어를 콘텐츠 위층에 배치하라. 이게 DS-098입니다.

2. 왜 콘텐츠 위인가

셀렉트 레이어가 펼쳐졌을 때 아래 콘텐츠에 가려지면 두 가지 문제가 생깁니다.

첫째, 선택지를 못 봅니다. 드롭다운 선택지가 다른 요소 뒤에 가려지면 사용자가 무엇을 고를지 알 수 없죠. 펼쳐진 레이어는 반드시 다른 콘텐츠 위에 온전히 보여야 합니다.

둘째, 상호작용 중임이 불명확합니다. 지금 조작 중인 요소(펼쳐진 셀렉트)가 다른 요소들과 같은 층에 있으면, 어느 것이 활성 상태인지 구분이 안 됩니다. 이 레이어를 위층으로 떠올리면, ’지금 이걸 조작 중’이라는 것이 계층(깊이)으로 명확히 표현되죠. 18편(고도)에서 본 ’떠 있는 것이 주목 대상’이라는 원리입니다 — 상호작용 중인 요소를 떠올려 주목시키는 것입니다.

이는 계층이 단순히 z-index 숫자가 아니라 ’상호작용 상태’를 전달하는 도구임을 보여줍니다. 펼쳐진 셀렉트가 위로 떠오르면, 사용자는 직관적으로 “지금 여기서 선택하면 되는구나”를 압니다. 긴급 공지(97편)가 중요도로 최상단이라면, 셀렉트 레이어는 ’지금 조작 중’이라 콘텐츠 위로 떠오르죠. 계층이 우선순위와 상호작용 상태를 함께 표현합니다.

3. 점검 / 개선

무엇을 점검하나

콘텐츠 위 배치 — 펼쳐진 셀렉트가 콘텐츠 위에 온전히 보이는가.

상호작용 구분 — 조작 중인 요소가 계층으로 구분되는가.

Before / After

/* ✅ 셀렉트 레이어 콘텐츠 위 */ .select-dropdown { position: absolute; z-index: 1000; } /* 콘텐츠 위층 */

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

역할	책임
디자이너	셀렉트 레이어 계층 설계
퍼블리셔/개발	콘텐츠 위 z-index 구현

기관 유형	DS-098 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (셀렉트·드롭다운 사용 시)

드롭다운·셀렉트가 있는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 펼쳐진 셀렉트가 콘텐츠 위에 온전히 보이나요?

□ 드롭다운 선택지가 다른 요소에 가려지지 않나요?

□ 조작 중인 요소가 구분되나요?

❓ FAQ

Q1. 셀렉트 외에도 적용되나요? 드롭다운·날짜 선택기·자동완성 등 펼쳐지는 모든 레이어에 적용됩니다. 펼쳐진 레이어는 콘텐츠 위에 보여야 합니다. Q2. 긴급 공지(97편)와 계층이 같나요? 긴급 공지가 더 위입니다. 긴급 공지(최상단) > 셀렉트 레이어(콘텐츠 위) > 콘텐츠 순의 계층입니다. Q3. KRDS를 채택하면 자동인가요? KRDS 셀렉트 컴포넌트는 콘텐츠 위 계층으로 설계돼 있습니다.

6. 마무리

DS-098의 메시지:

지금 조작 중인 레이어(셀렉트)는 콘텐츠 위로 떠올려 — 상호작용 상태를 계층으로 표현.

펼쳐진 셀렉트를 콘텐츠 위층에 두면 선택지가 온전히 보이고, 지금 조작 중임이 계층으로 명확해집니다. 계층이 우선순위(97편)뿐 아니라 상호작용 상태도 표현하는 것이죠.

다음 편은 엘리베이션 단계 구성을 다룹니다. DS-099 — “엘리베이션을 총 6단계(-1~+4)로 구성한다.”

다음 편 예고 ▶ 「099. 엘리베이션을 총 6단계로 구성하고, 각 단계를 -1부터 +4까지 엘리베이션의 차이를 두고 있다.」

ViewCheck는 셀렉트 레이어가 콘텐츠 위 계층에 배치됐는지를 진단합니다.

📚 참고 출처

KRDS 엘리베이션(Elevation) 스타일 가이드 — https://www.krds.go.kr/html/site/style/style_06.html

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

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