728x90
웹디자인(UX·UI·접근성·반응형·퍼포먼스) 관점에서 “실무에 바로 적용 가능한 형태”로 핵심은 “JS를 없애자”가 아니라, 표준 HTML/CSS로 해결 가능한 UI는 네이티브로 처리해 로딩/복잡도/접근성을 개선하고, JS는 정말 필요한 로직에만 쓰자는 방향입니다.
- 자바스크립트 줄이고, 웹디자인 퀄리티 올리기
- HTML만으로 되는 UI: 아코디언·모달·오프캔버스 메뉴
왜 “HTML로 대체”가 웹디자인에 유리한가
디자인 품질(사용자 경험) = 성능 + 접근성 + 일관성 + 유지보수성 입니다.
- 성능: JS는 다운로드→압축해제→파싱/평가→실행→상태 유지(메모리) 비용이 듭니다. 단순 UI 토글/오버레이까지 JS로 하면 초기 렌더링과 상호작용 준비 시간이 늘기 쉽습니다. 그래서 가능한 기능은 네이티브로 넘기자는 주장입니다.
- 접근성 기본값: 표준 요소는 키보드/스크린리더 동작이 이미 설계되어 있는 경우가 많아(예:
<details>/<summary>) “ARIA를 덧칠하는” 실수도 줄어듭니다. - 디자인 시스템화: “아코디언/모달/오프캔버스” 같은 컴포넌트를 네이티브 기반으로 만들면, 프레임워크가 바뀌어도 마크업/상태 모델이 안정적으로 유지됩니다.
300x250
컴포넌트 1 — 아코디언/확장 패널: <details> + <summary>
기본 구조(가장 권장)
<section class="accordion" aria-label="자주 묻는 질문">
<details>
<summary>배송은 얼마나 걸리나요?</summary>
<div class="panel">
<p>평균 1~2영업일 소요됩니다.</p>
</div>
</details>
<details>
<summary>교환/환불 정책은?</summary>
<div class="panel">
<p>수령 후 7일 이내 가능합니다.</p>
</div>
</details>
</section><details>는 “열림/닫힘” 상태를 네이티브로 제공하고, <summary>가 라벨 역할을 합니다.
한 번에 하나만 열리게(라디오형 아코디언)
<details name="faq" open>
<summary>첫 번째(기본 열림)</summary>
<p>내용...</p>
</details>
<details name="faq">
<summary>두 번째</summary>
<p>내용...</p>
</details>
<details name="faq">
<summary>세 번째</summary>
<p>내용...</p>
</details>같은 name을 주면 그룹 내에서 하나만 열리도록 브라우저가 처리합니다. (스크립트 없이 가능)
웹디자인 스타일링(“보기에 예쁜” 아코디언)
.accordion details {
border: 1px solid rgba(0,0,0,.12);
border-radius: 12px;
padding: 12px 14px;
margin: 10px 0;
}
.accordion summary {
cursor: pointer;
font-weight: 650;
list-style: none; /* 일부 브라우저에서 마커 숨김 */
}
/* 기본 삼각형 마커를 커스터마이즈하고 싶다면 */
.accordion summary::-webkit-details-marker { display: none; }
.accordion details[open] {
box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.accordion .panel {
margin-top: 10px;
color: rgba(0,0,0,.75);
line-height: 1.6;
}접근성/UX 체크포인트
- 키보드:
<summary>는 포커스/스페이스로 토글이 됩니다. (브라우저 기본) - 애니메이션:
display전환 애니메이션이 “기본 제공”되진 않습니다. (열림/닫힘 애니메이션은 별도 트릭 필요) - 권장 패턴: 애니메이션은 “있으면 좋음”이지 필수는 아닙니다. 먼저 정확히 동작하게 만들고, 필요 시 JS/고급 CSS로 점진 적용하세요.
컴포넌트 2 — 자동완성 제안 입력: <input list> + <datalist>
제품 검색/필터 UI 예시
<label for="product">상품 검색</label>
<input id="product" name="product"
type="search"
list="product-suggestions"
placeholder="예: 맨투맨, 후드, 데님"
autocomplete="off" />
<datalist id="product-suggestions">
<option value="맨투맨"></option>
<option value="후드 집업"></option>
<option value="데님 팬츠"></option>
<option value="슬랙스"></option>
</datalist><datalist>는 “허용/추천 옵션 목록”을 담고, <input>의 list로 연결합니다.
디자이너 관점에서 반드시 알아야 할 “제약”
datalist는 브라우저별 UI가 제각각이고, 스타일링 제약도 큽니다.
- MDN도 Baseline(광범위 보급) 미충족으로 표기합니다. (일부 주요 브라우저에서 제약)
- 접근성 이슈 예시(MDN)
- 옵션 폰트 크기 줌이 안 맞거나,
- 고대비 모드 스타일링이 어렵고,
- 특정 스크린리더/브라우저 조합에서 목록을 읽지 못할 수 있습니다.
- “검색형 셀렉트”를 기대하면 실망할 수 있습니다.
<datalist>는<select>대체가 아니고, 입력값은 목록 밖 값도 허용될 수 있습니다.
실무 권장 사용처
추천 검색어(“가벼운 힌트”) 정도에 쓰면 만족도가 높습니다.
- 예: 내부 관리자 페이지에서 “브라우저/국가/태그” 추천
- 예: 고객센터 폼에서 “자주 쓰는 문의유형” 추천(단, 실제 선택 강제는 별도 검증 필요)
대안(디자인 완성도가 중요할 때)
- “완전히 동일한 UI”가 중요하면: 커스텀 콤보박스(ARIA combobox) + JS가 현실적입니다.
- “표준 select 개선” 흐름도 커뮤니티에서 언급됩니다. (표준화 진행 기대)
컴포넌트 3 — 모달/팝오버: popover + popovertarget (+ <dialog>)
가장 단순한 팝오버(툴팁/미니패널 느낌)
<button popovertarget="help-pop">도움말</button>
<div popover id="help-pop">
배송은 평균 1~2영업일 소요됩니다.
</div>popover 속성은 요소를 “팝오버 요소”로 지정하고, popovertarget 버튼으로 열고 닫습니다.
auto / hint / manual 모드(디자인 의도에 맞게 선택)
MDN 기준으로
auto: 바깥 클릭/ESC로 닫힘(라이트 디스미스), 보통 다른 auto가 열리면 기존 auto가 닫힘hint: auto를 닫지 않지만 다른 hint는 닫을 수 있음(실험적)manual: 바깥 클릭으로 안 닫힘, 명시적으로 닫아야 함(여러 개 동시 표시 가능)
<button popovertarget="p1">Auto</button>
<div popover="auto" id="p1">auto 팝오버</div>
<button popovertarget="p2">Hint</button>
<div popover="hint" id="p2">hint 팝오버</div>
<button popovertarget="p3">Manual</button>
<div popover="manual" id="p3">
manual 팝오버
<button popovertarget="p3" popovertargetaction="hide">닫기</button>
</div>⚠️ 브라우저 호환성: popover는 “최근(2024년 이후) 넓게 사용 가능”이지만, 오래된 기기/브라우저는 미지원일 수 있고 일부 모드는 지원이 들쭉날쭉할 수 있습니다.
“진짜 모달”처럼 보이게 디자인하기(레이어·백드롭·포커스)
[popover]{
border: 0;
border-radius: 14px;
padding: 16px 18px;
max-width: min(92vw, 520px);
box-shadow: 0 18px 60px rgba(0,0,0,.22);
}
[popover]::backdrop{
background: rgba(0,0,0,.42);
backdrop-filter: blur(2px);
}::backdrop, :popover-open 같은 전용 훅을 활용할 수 있습니다.
컴포넌트 4 — 오프스크린 내비게이션(햄버거 메뉴): popover + nav + translate
모바일 오프캔버스 메뉴 예시
<button class="menu-btn" popovertarget="site-menu" aria-label="메뉴 열기">
☰
</button>
<nav popover id="site-menu" class="offcanvas" aria-label="주요 메뉴">
<header class="offcanvas__header">
<strong>MENU</strong>
<button popovertarget="site-menu" popovertargetaction="hide" aria-label="메뉴 닫기">✕</button>
</header>
<ul class="offcanvas__list">
<li><a href="/best">베스트</a></li>
<li><a href="/new">신상품</a></li>
<li><a href="/sale">세일</a></li>
</ul>
</nav>.offcanvas{
margin: 0; /* UA 기본 중앙정렬을 피하려면 필요할 수 있음 */
height: 100vh;
width: min(86vw, 360px);
translate: -100vw; /* 닫힘 상태에서 화면 밖 */
padding: 16px;
}
.offcanvas:popover-open{
translate: 0; /* 열림 상태에서 화면 안 */
}
.offcanvas::backdrop{
background: rgba(0,0,0,.4);
}디자인/UX 체크포인트(오프캔버스는 특히 중요)
- 닫기 affordance: 백드롭 클릭/ESC로 닫히는지(
auto) vs 반드시 닫기 버튼이 필요한지(manual)를 제품 성격에 맞게 결정하세요. - 포커스 이동: 메뉴가 열리면 첫 링크/닫기 버튼에 포커스가 가는 게 이상적입니다. (여기서부터는 “완전무JS”보다는 로우JS 점진 적용을 추천)
- 스크롤 잠금: 배경 스크롤 잠금은 제품 정책에 따라 필요합니다. (이 또한 JS가 더 깔끔)
“완전 무JS”로 끝내지 말고, 웹디자인 관점에서의 권장 전략(현실 버전)
실무에서는 아래처럼 가는 게 가장 실패가 적습니다.
1단계: 네이티브 우선(무JS)
- 아코디언:
<details name>로 기본 완성 - 오버레이/메뉴:
popover로 기본 동작 - 검색 힌트:
datalist는 “있으면 좋은 추천” 수준으로만
2단계: “로우JS”로 UX 마감(점진 강화)
- 모달 열릴 때 포커스 이동, 닫힐 때 원래 버튼으로 복귀
- 오프캔버스 열릴 때 배경 스크롤 잠금
<details>에 부드러운 애니메이션(원하면)
“JS를 완전히 배척”이 아니라, JS를 더 중요한 일에 쓰자는 관점입니다.
웹디자인 QA 체크리스트
A. 반응형/레이아웃
- 320px 폭에서도 summary 텍스트 줄바꿈/터치 영역 충분(44px 권장)
- 오프캔버스 메뉴 폭이 과도하지 않음(
min(86vw, 360px)등)
B. 상호작용/키보드
- Tab 이동이 논리적(열림 상태에서 콘텐츠 접근 가능)
- ESC/백드롭 닫힘 정책이 의도와 일치(
auto/manual)
C. 접근성
<nav aria-label>/ 버튼aria-label등 의미 부여datalist사용 시 스크린리더/줌/고대비에서 문제 없는지 확인(특히 중요)
D. 호환성/폴백
- popover 미지원 브라우저에서 깨지지 않게(예: 그냥 인라인 메뉴로 보여주거나, JS 폴리필/대체 UI)
- datalist는 브라우저별 UX 차이를 감안(핵심 기능 의존 금지)
“디자인적으로 완성도 높은” 추천 조합
- FAQ/설명 접기:
<details name>+ 커스텀 스타일(가장 가성비 좋음) - 간단 팝오버/도움말:
popover="auto"(ESC/외부클릭 닫힘 UX 좋음) - 모바일 메뉴:
nav popover+translate+::backdrop - 검색 자동완성 “완성형 UI”:
datalist만으로는 한계가 많아, 중요 기능이면 JS/컴포넌트가 현실적
728x90
그리드형(광고전용)
댓글