DDODDO LAB

테이블 접근성 구현 방법: caption과 scope 차이 및 올바른 사용법

공공기관 고도화 대응 정리공공기관 프로젝트에서테이블은 QA에서 가장 많이 걸리는 영역 중 하나다.특히 자주 지적되는 항목이:caption 누락scope 잘못 사용th/td 구조 오류의미 없는 table 사용이번 글에서는실무에서 바로 적용 가능한 기준으로 정리한다. 1. caption은 왜 필요한가?caption은 단순 제목이 아니다.스크린리더는테이블을 읽기 전에 caption을 먼저 읽는다.즉,“이 테이블이 무엇을 설명하는지”를 알려주는 장치다. ❌ 잘못된 예 이름 부서 → 스크린리더는“테이블 시작, 2열 10행” 이런 식으로만 읽는다. ✅ 올바른 예 직원 정보 목록 이름 부서 caption은 화면에 보여도 되고,숨겨도 된다 🔹 화면에 보이지..

웹 퍼블리셔를 위한 공통 UI 컴포넌트 설계 순서 (버튼·폼·테이블 기준)

공통 컴포넌트 설계 순서 (버튼/테이블/폼 우선순위)(버튼/테이블/폼 우선순위)고도화 프로젝트에서 공통 컴포넌트를 “예쁘게” 만들기보다 중요한 건 하나다.먼저 만들면 손이 덜 가는 것부터 만든다. 특히 공공기관/관리자 화면은 테이블·폼·버튼이 반복되기 때문에설계 순서가 곧 일정이다. 왜 “순서”가 중요한가? 공통을 늦게 잡으면 이런 일이 생긴다.페이지 20개 만든 뒤 버튼 스타일 전체 수정테이블 줄 간격/정렬 규칙이 페이지마다 달라짐폼 요소(인풋/셀렉트)만 QA 때 전부 걸림결국 “공통 반영”으로 재작업이 발생고도화에서 공통은초반에 고정해야 한다. 결론: 추천 설계 순서1) 버튼 (Button)2) 폼 (Form: input/select/checkbox/radio)3) 테이블 (Table)4) 상태/피..

공통 CSS가 중복되는 이유와 해결법(로드순서/우선순위 실전)

공통 CSS가 중복되는 이유와 해결법(로드 순서 · 우선순위 실전 정리)고도화 프로젝트에서 가장 많이 나오는 말:“왜 여기만 스타일이 다르게 나오지?” 코드는 똑같은데페이지마다 다르게 보이는 경우. 대부분 원인은공통 CSS 중복 + 로드 순서 + 우선순위 충돌이다. 1. 공통 CSS가 중복되는 이유1) 프로젝트가 이어받기식으로 진행됨A업체 → B업체 → C업체공통 파일을 건드리기 무서워서 새로 추가결국 비슷한 버튼 스타일이 3군데 존재2) 페이지 전용 CSS가 공통을 덮어씀/* common.css */.btn { padding: 10px 20px;}/* page.css */.btn { padding: 12px 24px;} → 어디가 이기느냐는 “로드 순서”에 달림.3) !important 남발...

SCSS와 CSS가 함께 쓰인 프로젝트 정리 방법

(고도화 실전: 레거시 정리 루틴)고도화 프로젝트를 들어가면 흔히 이런 상태다.어떤 사이트는 SCSS어떤 사이트는 CSS공통은 여기저기서 불러오고파일명/경로 규칙도 제각각이 상태에서 “그냥 수정”부터 하면 중반부터 충돌과 중복이 폭발한다.정리는 코딩 전에 해야 한다. 1. 먼저 “목표”를 정하자 (중요)혼재 프로젝트 정리는 2가지 선택지 중 하나다.A. 완전 통합(추천: 신규/대규모 개편)모든 스타일을 SCSS로 통일구조 재설계 가능초기 비용 ↑ / 유지보수 효율 ↑B. 병행 운영(추천: 고도화/기간 촉박)기존 CSS 유지신규(v2/v3/v4 등)만 SCSS로 구성리스크 ↓ / 속도 ↑공공기관 고도화는 대부분 B가 현실적이야.2. “현재 상태”를 30분 안에 지도 그리기체크어디가 SCSS인지 / 어디..

공공기관 고도화 실전: 여러개 사이트 병행할 때 반드시 먼저 할 일

공공기관 고도화 실전: 시작 전에 반드시 해야 할 5가지공공기관 고도화 프로젝트는“디자인 나오면 코딩 시작”이 아니다.시작 전에 구조를 정리하지 않으면프로젝트 중반부터 무너진다.실제 실무 기준으로 정리한다. 1. 기존 구조부터 해부하라고도화인데기존 구조를 안 보면 100% 문제 난다.확인해야 할 것:CSS / SCSS 혼용 여부공통 include 방식레이아웃 고정폭인지 유동폭인지v2 / v3 병행 폴더 존재 여부중복 컴포넌트 존재 여부>> 기존 공통 파일을 먼저 정리해야 한다. 2. 반응형 전략을 통일하라공공기관은 대부분 PC First 구조다.확인할 것:min-width / max-width 혼재 여부실제 브레이크포인트 값1024 / 768 기준 적용 방식접근성 대응 방식전략 통일 없이 작업하면파일마..

공공기관 웹사이트 반응형이 PC First 구조인 이유

공공기관 웹사이트가 PC First 구조로 설계되는 이유 분석. 접근성, 인증, 레거시 유지보수 관점에서 반응형 전략 정리. 왜 공공기관 사이트는 아직도 PC First일까?최근 프로젝트를 진행하며여러 공공기관 사이트의 CSS 구조를 분석해봤습니다. 의외로 많은 사이트가Mobile First가 아닌 PC First 구조로 되어 있었습니다. 왜일까요? 단순히 “구식이라서”는 아닙니다. 1. 인증 및 보안 모듈이 PC 환경 기준공공기관은공동인증서행정 시스템 연계내부 업무 시스템등이 PC 환경 기준으로 설계되어 있습니다. 즉,주 사용 환경이 여전히 데스크톱 중심입니다. 그래서 기본 CSS가 PC 레이아웃이고,모바일은 보조 레이어로 처리합니다. 2. 접근성 검사 기준이 PC 화면 중심웹 접근성 인증 과정에서..