OK DDODDO LAB

AI로 접근성 마크업 적용하기(2)

스크린리더 테스트 없이 GPT로 접근성 검증하기 접근성 검증, 왜 어렵고 시간이 걸릴까?웹 접근성을 구현하는 것도 어렵지만, 검증하는 과정은 더 복잡하고 까다롭습니다. 특히 시각장애인을 위한 스크린리더(예: NVDA, VoiceOver)를 사용해 직접 테스트하려면 다음과 같은 제약이 존재합니다:스크린리더 환경 구축: Windows 또는 macOS에 별도 프로그램 설치학습 필요: 키보드 명령어와 스크린리더 작동 방식 이해 필요테스트 시간: 매 페이지마다 일일이 확인해야 하므로 생산성 저하이러한 이유로 실제 현업에서도 스크린리더 테스트는 QA 단계에서 일부만 진행하거나 생략되는 경우가 많습니다. 그러나 이런 방식은 애드센스 승인 시 주요 장애 요인이 될 수 있고, 법적 접근성 기준을 만족하지 못할 가능성도..

AI로 접근성 마크업 적용하기(1)

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

ChatGPT로 모바일/PC 대응 레이아웃 만들

반응형 웹 레이아웃, 왜 중요한가?모바일 기기의 폭발적인 증가와 다양한 해상도의 등장으로 인해, 이제 웹사이트는 단순히 "PC 전용" 또는 "모바일 전용"으로 구분할 수 없습니다. 사용자 경험(UX)을 고려한 반응형 웹은 선택이 아닌 필수가 되었고, 구글 애드센스 승인에도 영향을 미치는 중요한 요소입니다. 실제로 Google은 모바일 최적화가 되어 있지 않은 사이트에 대해 낮은 품질 점수를 부여하며, 이는 광고 승인에 직접적인 영향을 줄 수 있습니다.반응형 웹을 만들기 위해서는 다양한 화면 너비를 고려한 HTML 구조와 CSS 미디어쿼리 작성이 필요합니다. 하지만 모든 뷰포트 상황을 코드로 대응하기란 시간과 노력이 많이 드는 작업입니다. 이때 ChatGPT와 같은 AI 도구를 활용하면, 실무 수준의 반응..

GPT로 반응형 마크업 하기 : Tailwind CSS 예제

퍼블리셔 실무에 바로 적용 가능한 AI 기반 반응형 마크업 자동화 팁 GPT와 퍼블리셔 업무 자동화의 만남최근 웹 퍼블리싱 업무는 단순한 HTML/CSS 작성에서 나아가, UI/UX 흐름 이해, 반응형 구조 설계, 컴포넌트 분리 및 유지관리까지 점점 전문화되고 있습니다. 하지만 이러한 업무의 상당 부분은 여전히 반복적이고 시간이 오래 걸리는 작업입니다. 이때 등장한 것이 바로 GPT와 같은 생성형 AI 도구입니다. ChatGPT를 비롯한 GPT 기반의 모델은 단순한 문장 생성뿐 아니라, Tailwind CSS와 같은 유틸리티 퍼스트 프레임워크를 활용한 반응형 마크업 코드까지 자동으로 생성해줄 수 있습니다.퍼블리셔가 GPT를 잘 활용하면 다음과 같은 업무 효율화를 기대할 수 있습니다:코드 템플릿 빠른 생..

시맨틱 태그란? 왜 여전히 중요할까?웹 페이지의 마크업 구조에서 나 같은 비시맨틱 태그만 사용하는 시대는 지났습니다.HTML5 이후로 도입된 , , , , , 등의 **시맨틱 태그(semantic tags)**는 단순한 레이아웃 구분이 아닌, 의미 기반의 구조 표현을 가능하게 합니다. 시맨틱 태그는 :**검색 엔진 최적화(SEO)**에 유리하고스크린 리더 등 접근성 도구에도 정확한 정보를 전달하며코드의 유지보수성과 가독성을 획기적으로 높여줍니다.하지만 현실은 다릅니다. 웹퍼블리셔는 빠듯한 일정 속에서 디자인 시안을 보고 빠르게 구조를 뽑아내야 하는 상황이 많고, 시맨틱 구조까지 신경 쓰기란 쉽지 않습니다.바로 이 지점에서 GPT와 같은 AI 도구의 도움이 빛을 발하게 됩니다.GPT로 시맨틱 구조를 ..

시멘틱 HTML이 퍼블리싱에 왜 중요한가?웹 퍼블리싱에서 HTML5 시멘틱 태그는 단순한 구조 분리를 넘어서 접근성 향상, 검색 엔진 최적화(SEO), 유지보수 용이성까지 다양한 이점을 제공합니다. MyBlog AboutBlog GPT와 시맨틱 태그 구조 자동 생성 2025.06.25 …본문 내용… #GPT#시멘틱태그 관련 글 GPT 컴포넌트 자동화 © 2025 MyBlog. All rights reserved. 이 구조는 시멘틱 태그가 깔끔하게 레이아웃별로 배치되어 있어, 이 위에 CSS나 반응형 처리를 붙이기 쉽습니다. 퍼블리셔는 여기서 디자인 색상, 폰트, 마진..

1. 퍼블리셔의 반복 작업, 이제는 AI로 줄인다웹 퍼블리셔는 다양한 페이지에서 공통으로 쓰이는 UI 컴포넌트를 자주 작성합니다.예를 들어 버튼, 카드, 리스트 같은 요소는 프로젝트가 달라져도 구조와 사용 방식은 대부분 비슷합니다.문제는 이런 요소들을 매번 처음부터 마크업하고 클래스 지정하고 반응형 대응까지 하다 보면 시간이 꽤 걸린다는 점입니다.이럴 때 ChatGPT와 같은 AI 도구를 활용하면 생산성을 크게 높일 수 있습니다.GPT에게 조건을 입력하면 마치 템플릿처럼 자주 사용하는 구조를 자동으로 만들어주기 때문에, 초안 작업이 매우 빨라집니다.이 글에서는 퍼블리셔 실무에서 자주 사용하는 버튼, 카드, 리스트 컴포넌트를 예로 들어, GPT로 자동 생성하는 과정과 실제 적용 팁을 알려드리겠습니다. 2...

왜 AI가 필요할까?웹 퍼블리셔의 일은 디자이너가 만든 시안을 HTML/CSS로 정리하고, 반응형 구조를 고려해 다양한 브라우저와 기기에서 일관되게 보이도록 작업하는 것이다. 하지만 현실에서는 단순히 마크업만 하는 게 아니라 디자인 가이드를 정리하고, 자주 사용하는 레이아웃을 반복 제작하거나, 개발자와 소통하면서 레이아웃 구조를 맞춰가는 복합적인 작업이 많다. 이런 작업 중 상당수는 반복적이고 규칙적인 성격을 띠는데, 이 부분을 AI 도구, 특히 ChatGPT로 상당 부분 자동화할 수 있다. ChatGPT는 단순히 텍스트 대화를 넘어서 구조 있는 코드 생성, 에러 해결, 문서 요약 및 정리, 코드 리뷰, 반응형 대응 제안까지 다양한 퍼블리싱 영역에서 활용할 수 있다. 특히 퍼블리셔가 시간을 많이 쓰는 ..

같은 커스텀 컴포넌트에서는 Vue의 구조 특성상 구조가 잘못되기 쉽습니다. 스크린리더는 이 input이 어떤 필드인지 알 수 없습니다. {{ label }} input과 label 연결을 위한 id 생성 {{ label }} :id="inputId" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> aria-labelledby 대체 방식 시각적으로 라벨을 숨겨야 할 경우:{{ label }} v-model 호환 개선 defineProps(['modelValue', 'label']); defineEmit..

vue2 라우터 설치만 3번째...라우터만 설치하면 나타나는 에러늪!!!! 꼭? 필요한 설정이 있어서 기록합니다. 에러 You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. ERROR in [eslint] D:\stduy\vue2-project\todo2\src\views\HomeView.vue 13:11 error Component name "home" should always be multi-word vue/multi-word-component-name..