DDODDO LAB

clamp() 실무 적용 시 주의할 점(반응형 설계 관점)

반응형 작업을 하다 보면 “디자이너가 1920 시안을 줬는데 모바일도 대응해야 한다” 같은 상황이 흔하다.이때 clamp()는 최소값(min) ~ 최대값(max) 범위 안에서 뷰포트에 따라 값이 유동적으로 변하게 만들어 주는 꽤 강력한 도구다.하지만 실무에서는 clamp()를 “그냥 다 clamp로 바꾸면 반응형 끝”처럼 쓰면 문제가 생긴다.특히 공공/접근성/다중 사이트 운영 같은 환경에서는 더 조심해야 한다.아래 주의 포인트만 잡아도, clamp를 “편한 도구”에서 “안정적인 설계 도구”로 쓸 수 있다. 1. clamp()는 ‘반응형’이 아니라 ‘유동 스케일링’이다clamp()는 브레이크포인트를 대체하는 만능이 아니다.브레이크포인트는 레이아웃 구조가 바뀌는 순간(그리드 → 1열, GNB 형태 변경 ..

반응형 테이블 작업(스크롤,컬럼숨김,카드형)

깨지지 않는 관리자 화면 만드는 방법 반응형 작업에서가장 난이도가 높은 요소는 테이블이다.모바일에서 가로 스크롤 발생컬럼이 줄어들며 의미 손실버튼이 밀림정렬이 깨짐테이블은 단순히 줄이는 게 아니라전략적으로 설계해야 한다. 1. 테이블은 줄이는 게 아니라 “방식”을 바꿔야 한다많은 사람들이 이렇게 생각한다.“모바일에서 width:100%면 되겠지?”아니다. 테이블은 화면 크기에 따라표현 방식을 바꾸는 것이 핵심이다.2. 반응형 테이블 3가지 2-1. 가로 스크롤 유지 (가장 안전)/* CSS */.table-wrap { overflow-x: auto;}/* HTML */ ... 장점구조 유지접근성 안전관리자 화면에 적합단점모바일 UX는 다소 불편공공기관 관리자 화면은이 방식이 가장 현실적이..

반응형 이미지 처리 방법: object-fit과 aspect-ratio

반응형 이미지 처리 정리(object-fit · aspect-ratio · 고정 vs 유동 판단법) 반응형 작업에서레이아웃보다 더 많이 깨지는 것이 있다.바로 이미지다.PC에서는 예쁜데 모바일에서 잘림비율이 깨짐높이가 이상하게 늘어남콘텐츠 영역이 밀림반응형 이미지 설계는단순히 width:100%가 아니다. 1. 가장 기본 원칙/* CSS */img { max-width: 100%; height: auto;} 이건 기본 세팅이다. 하지만 이것만으로는 모든 상황을 해결할 수 없다. 2. 고정 이미지 vs 유동 이미지 판단법1) 고정 비율 유지가 필요한 경우썸네일 카드배너슬라이드 이미지유튜브 썸네일뉴스 목록 이미지→ 비율 유지가 중요 2) 유동 크기 허용이 가능한 경우본문 삽입 이미지상세 설명 이미지..

공공기관 고도화 프로젝트를 하다 보면 이런 상황이 나온다.동일한 구조의 사이트 5~9개공통 소스는 공유일부는 별도 관리기존 레거시는 유지신규 레이아웃은 전면 개편이때 디렉토리 구조를 잘못 잡으면중반부터 수정 범위가 통제되지 않는다.고도화의 핵심은 “코딩”이 아니라구조 설계다. 1. 가장 많이 하는 실수❌ 기존 폴더 안에 그냥 덮어쓰기❌ v2, v3를 섞어 쓰기❌ 사이트별로 공통 파일을 복사해서 관리이렇게 되면:공통 수정 시 9번 수정QA 반영 누락배포 충돌유지보수 지옥 2. 기본 전략: “공통과 개별을 분리하라”여러 사이트 고도화 시폴더는 크게 3단계로 나누는 것이 안전하다./common /site-a /site-b /site-c 추천 구조 예시/assets /common /css ..

브레이크포인트 1024 / 768 구조 실전 적용 가이드공공기관 고도화 프로젝트를 들어가면가장 먼저 마주치는 혼란이 있다.“브레이크포인트가 제각각이다.” 어떤 페이지는 1200,어떤 곳은 1024,어떤 파일은 768,심지어 min/max가 섞여 있다. 이 상태에서 작업을 시작하면프로젝트 중반부터 유지보수가 무너진다.고도화의 핵심은 통일이다. 1. 왜 공공기관은 1024 / 768이 많은가?대부분 구조는 이렇게 되어 있다.PC 기준: 1024px 이상태블릿: 768px ~ 1023px모바일: 768px 이하이유는 단순하다.과거 PC 해상도 기준이 1024 중심행정 업무는 PC 사용 비율 높음접근성 인증 기준 대응내부 행정망 해상도 환경 고려즉, 모바일 퍼스트라기보다PC 안정성 중심 구조다. 2. 브..

공공기관 검수 대응 가이드공공기관 고도화에서폼 영역은 접근성 QA의 핵심 체크 대상이다.특히 자주 지적되는 항목:필수 입력 표시가 시각적으로만 존재에러 메시지가 입력창과 연결되지 않음포커스 이동 미흡색상으로만 상태 구분placeholder를 label처럼 사용이번 글은실무에서 바로 적용 가능한 규칙 중심으로 정리한다. 1. 필수 입력 표시 규칙❌ 자주 틀리는 방식이름 * 문제:*가 시각적으로만 의미 있음스크린리더는 필수인지 모름✅ 올바른 방식 이름 * 핵심 포인트required 속성 사용aria-required="true" 명시별표는 aria-hidden 처리필수 안내 문구도 필요폼 상단에표시는 필수 입력 항목입니다. 같은 안내 문구를 제공하면 더 좋다.2. 에러 메시지 구조 규칙❌ 잘못된 구조 ..