DDODDO LAB

웹 퍼블리싱 업무를 하다 보면 디자인은 달라도 반복되는 작업이 많습니다. 카드 목록을 만들고, PC에서는 3열로 배치하고, 태블릿에서는 2열, 모바일에서는 1열로 바꾸는 작업도 그중 하나입니다.이런 작업은 어렵지는 않지만 HTML 구조를 만들고 클래스명을 정한 다음 반응형 CSS까지 작성하려면 생각보다 시간이 걸립니다.저는 요즘 반복적인 마크업 초안을 만들 때 ChatGPT를 활용하고 있습니다.잘 작성된 프롬프트를 사용하면 HTML과 CSS 초안을 10분 안에도 만들 수 있습니다. 다만 AI가 만들어준 코드를 그대로 사용하는 것이 아니라, 웹 접근성과 프로젝트 환경에 맞게 검수하고 수정하는 과정은 반드시 필요합니다. ChatGPT에게 “코드 만들어줘”라고만 하면 안 되는 이유 처음 ChatGPT를 사..

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

min-width와 max-width 미디어쿼리 차이점 정리. Mobile First vs PC First 전략 비교와 퍼블리셔 실무 적용 기준 설명. 정리. Mobile First vs PC First 전략 비교와 퍼블리셔 실무 적용 기준 설명. min-width와 max-width, 아직도 헷갈리나요? 반응형 작업을 하다 보면반드시 마주치는 선택지가 있습니다. CSS@media (min-width: 768px) 또는 CSS@media (max-width: 768px) 둘 다 맞는 방법입니다.하지만 설계 기준은 완전히 다릅니다. 기본 개념 차이min-width → Mobile First 방식작은 화면을 기본으로 두고점점 확장합니다.CSS/* 기본: 모바일 */@media (min-width:..

웹 사이트의 뼈대를 구축하는 전문가의 정체 웹 퍼블리셔는 코딩만 하는 사람이 아니다웹 퍼블리셔(Web Publisher)라는 직업명을 들으면 ‘그냥 코딩하는 사람 아닌가요?’라는 질문을 종종 받습니다. 하지만 실제로 웹 퍼블리셔는 단순한 코딩을 넘어, 디자인 시안을 구현하면서도 웹 표준, 접근성, 반응형 대응, 사용자 경험(UX), SEO까지 고려하는 종합적인 역할을 맡습니다. 다시 말해, ‘보이는 화면을 책임지는 기술자’가 아닌, 디자인과 기술 사이를 잇는 다리라고 볼 수 있습니다.웹 퍼블리셔는 주로 디자이너가 제공한 시안을 HTML/CSS/JavaScript 등으로 구현합니다. 그러나 그 과정에서 단순히 모양을 똑같이 재현하는 것이 아닌, 의도한 디자인을 다양한 환경에서 일관되게 표현하고, 유지보..

AI로 접근성 마크업 적용하기: aria-label부터 role까지 접근성 마크업, 왜 중요할까?접근성(accessibility)은 단순히 시각·청각 장애인을 위한 고려사항을 넘어, 모든 사용자에게 정보와 기능을 동등하게 제공하기 위한 웹의 기본 원칙입니다. 최근 구글을 비롯한 주요 검색엔진, 정부 기관, 글로벌 브랜드들이 접근성을 SEO 및 UI/UX의 핵심 요소로 인식하면서, 접근성 마크업은 더 이상 선택이 아닌 필수가 되었습니다.웹 접근성의 핵심은 HTML의 시맨틱 구조와 보조 기술이 이해할 수 있는 명확한 라벨링입니다. 이를 위해 등장한 것이 바로 aria-* 속성과 role 속성입니다. 하지만 퍼블리셔 입장에서 이 속성들을 매 페이지마다 정확히 적용하기란 쉬운 일이 아닙니다. 사용처, 사용 방..