끼워 넣은 프레임도 함께 어둡게

KRDS DS-118 — 부모 화면이 선명한 화면 모드로 전환되었을 때, 프레임 요소도 어두운 배경의 스타일 일관성을 유지하고 있다.

0. 들어가며 — 끼워 넣은 화면의 함정

지난 117편(화면 이동 일관성)에 이어, 이번 118편은 프레임 요소(iframe 등)의 모드 일관성입니다 — 부모가 선명모드면 프레임도 어둡게.

웹페이지 안에는 다른 페이지를 끼워 넣는 ’프레임(iframe)’이 있습니다. 지도·동영상·외부 위젯·민원 폼 등을 프레임으로 박는 경우가 많죠. 그런데 부모 화면은 선명한 화면 모드로 어두운데, 끼워 넣은 프레임만 밝은 일반 모드면? 어두운 화면 안에 밝은 사각형이 떠 보여 일관성이 깨집니다. DS-118은 프레임 요소도 어두운 배경 일관성을 유지하라고 규정합니다. 이번 편은 프레임 일관성을 풀어냅니다.

1. 규칙 원문 — 프레임도 어둡게

DS-118 (디자인 스타일 > 선명한 화면 모드) “부모 화면이 선명한 화면 모드로 전환되었을 때, 프레임 요소도 어두운 배경의 스타일 일관성을 유지하고 있다.”

부모 페이지가 선명한 화면 모드면, 그 안에 끼워 넣은 프레임(iframe 등)도 어두운 배경으로 일관되게 맞추라는 뜻입니다.

정리: 부모가 선명모드면 프레임 요소도 어두운 배경으로 일관성을 유지하라. 이게 DS-118입니다.

2. 왜 프레임도 함께 어둡게 하나

프레임(iframe)은 한 페이지 안에 다른 페이지를 끼워 넣는 요소입니다. 부모와 프레임은 기술적으로 별개의 문서라, 부모가 모드를 바꿔도 프레임 내부는 자동으로 안 바뀝니다. 그래서 부모는 어두운 선명모드인데 프레임만 밝은 일반 모드로 남기 쉽죠.

이렇게 되면 어두운 화면 한가운데 밝은 사각형이 떠, 시각적으로 매우 어색합니다. 114편(넓은 흰 배경 제한) 에서 본 것처럼 어두운 화면의 넓은 밝은 면은 눈부심을 유발하고, 모드 일관성(117편)도 깨지죠. 사용자는 ‘왜 이 부분만 밝지?’ 하며 혼란스러워합니다.

그래서 프레임 요소도 부모의 모드를 따라 어두운 배경으로 맞춰야 합니다. 구현 방법은 — 같은 사이트가 만든 프레임이라면 부모의 모드 설정을 프레임에 전달(파라미터·postMessage 등)해 프레임 내부도 선명모드를 적용 하고, 모드 토큰을 공유하는 것이죠. 외부 위젯이라 제어가 어려우면, 최소한 프레임 주변·배경을 어둡게 처리해 이질감을 줄입니다. 117편이 ‘페이지 간’ 일관성이라면, 118편은 ’한 페이지 안에 끼워 넣은 프레임’의 일관성 입니다. 화면 전체가 한 덩어리로 어두운 톤을 유지해야, 선명한 화면 모드가 완성되니까요.

3. 점검 / 개선

무엇을 점검하나

프레임 어두운 배경 — 선명모드에서 iframe 내부도 어두운가.

이질감 없음 — 어두운 화면에 밝은 프레임이 떠 보이지 않는가.

모드 전달 — 부모 모드가 프레임에 전달되는가.

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

역할	책임
개발(프론트)	부모 모드를 프레임에 전달, 프레임 내부 모드 적용
디자이너	프레임 영역 어두운 톤 설계

기관 유형	DS-118 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (선명모드 + 프레임 사용 시)

선명한 화면 모드를 제공하고 iframe 등 프레임이 있는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 선명모드에서 iframe 내부도 어두운가요?

□ 어두운 화면에 밝은 프레임이 떠 보이지 않나요?

□ 부모 모드가 프레임에 전달되나요?

❓ FAQ

Q1. 외부 위젯은 제어가 안 되는데요? 외부 프레임은 내부를 직접 못 바꿀 수 있습니다. 그땐 프레임 주변·배경을 어둡게 처리해 이질감을 줄이거나, 가능하면 다크 지원 위젯을 선택합니다. Q2. 같은 사이트 프레임은요? 부모의 모드 설정을 파라미터·postMessage로 전달해 프레임 내부에도 선명모드를 적용합니다. Q3. 117편과 다른가요? 117편은 페이지 간 모드 유지, 118편은 한 페이지 안 프레임의 일관성입니다. 둘 다 모드 일관성 가족입니다.

6. 마무리

DS-118의 메시지:

끼워 넣은 프레임도 함께 어둡게 — 화면 전체가 한 덩어리로 어두운 톤을 유지해야 한다.

프레임은 별개 문서라 부모 모드가 자동으로 안 적용됩니다. 부모가 선명모드면 프레임도 어두운 배경으로 맞춰야, 어두운 화면에 밝은 사각형이 뜨는 이질감과 눈부심을 막죠. 화면 전체의 톤 일관성이 선명한 화면 모드를 완성 합니다.

다음 편은 선명모드의 대비 기준을 다룹니다. DS-119 — “선명한 화면 모드에서 전경·배경 명도 대비를 4.5:1 이상으로 한다.”

다음 편 예고 ▶ 「119. 선명한 화면 모드에서 전경과 배경의 명도 대비를 4.5:1 이상으로 적용하고 있다.」

ViewCheck는 선명한 화면 모드에서 프레임 요소가 어두운 배경 일관성을 유지하는지를 진단합니다.

📚 참고 출처

KRDS 선명한 화면 모드 가이드 — https://www.krds.go.kr/html/site/style/style_02.html

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

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