DDODDO LAB

웹 접근성에서 언제 사용해야 할까?웹 접근성을 고려한 퍼블리싱을 하다 보면 자주 등장하는 두 가지 방법이 있다.aria-labelsr-only 둘 다 스크린리더 사용자에게 정보를 전달하기 위한 방법이지만사용 목적과 상황은 조금 다르다.실무에서 헷갈리기 쉬운 aria-label vs sr-only 차이를 정리해보자. aria-label이란?aria-label은 ARIA 속성 중 하나로요소의 이름(라벨)을 스크린리더에게 제공하는 역할을 한다.예를 들어 아이콘 버튼이 있다고 가정해보자. 화면에는 아이콘만 보이지만스크린리더는 다음처럼 읽는다."검색 버튼" 즉 aria-label은✔ 화면에 텍스트가 없어도✔ 스크린리더에 설명을 제공한다. sr-only란?sr-only는 CSS 패턴으로화면에서는 보이지 않지..

웹 접근성을 위한 숨김 텍스트 처리 방법웹 퍼블리싱을 하다 보면 화면에는 보이지 않지만 스크린리더에는 읽히도록 해야 하는 텍스트가 필요할 때가 있다.대표적인 예가 바로 다음과 같은 경우다.아이콘 버튼 설명추가 설명 텍스트접근성 보조 문구스킵 네비게이션이럴 때 사용하는 것이 바로 sr-only 클래스다. sr-only란 무엇인가?sr-only는 screen reader only의 약자다.즉, 화면에서는 보이지 않지만스크린리더에서는 읽히는 텍스트 를 만들기 위한 CSS 패턴이다.예를 들어 이런 버튼이 있다고 하자. 이 경우 스크린리더는 버튼의 의미를 알 수 없다.그래서 보조 텍스트를 추가해야 한다. 검색 이렇게 하면화면에는 아이콘만 보이고스크린리더는 검색 버튼으로 읽는다.sr-only CSS 코..

리액트 UI 작업썸네일 이미지 자동 뿌려짐메뉴를 클릭하면 하단 콘텐츠가 좌→우로 펼쳐지고, 우측의 슬라이더로 속도(0.2–3.0s) 를 조절할 수 있고, 카드 개수와 크기를 UI에서 직접 조절할 수 있도록구현한 코드카드 개수: 1~20개 설정 가능너비·높이(px): 각각 50~400 범위에서 변경import React, { useState } from "react"; import { motion } from "framer-motion"; import { ChevronDown, Play, Zap } from "lucide-react";const MENUS = [ "mn1", "mn2", "콘텐츠", "mn4", "mn5", ];const Card = ({ index, width, height }: { in..

웹 퍼블리셔 vs 프론트엔드 개발자, 무엇이 다를까? 같은 듯 다른 두 역할, 정확하게 구분하기 용어 혼용이 부른 혼란, 웹 퍼블리셔와 프론트엔드는 다르다웹 업계에서 가장 자주 혼동되는 역할 중 하나가 바로 웹 퍼블리셔와 프론트엔드 개발자입니다. 실제 현업에서도 이 둘의 경계를 명확히 이해하지 못해 채용 공고나 업무 지시에서 혼란이 생기는 경우가 많습니다. 특히 중소규모 기업에서는 한 사람이 퍼블리싱과 프론트 개발을 모두 담당하기도 하면서, 구분이 더 모호해지곤 합니다.그러나 이 둘은 업무의 중심 영역과 기술 스택, 협업 방식에서 분명한 차이가 존재합니다. 요약하자면,웹 퍼블리셔는 디자인을 웹페이지로 구현하는 역할프론트엔드 개발자는 기능을 웹에 구현하는 역할입니다.퍼블리셔는 HTML/CSS를 중심으로 시..

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

HTML을 시작하기 위한 필수 준비물: 개발 환경 세팅HTML을 배우기 위해 꼭 복잡한 툴이 필요한 것은 아닙니다. 하지만 효율적으로 작업하고 실시간 결과를 확인하기 위해서는 최소한의 개발 환경을 세팅해 두는 것이 좋습니다.가장 추천하는 도구는 바로 [VS Code (Visual Studio Code)]입니다. 무료이며, 가볍고, 다양한 확장 기능을 통해 HTML뿐 아니라 CSS, JS까지 연동해서 사용할 수 있습니다.VS Code 설치 방법:공식 사이트에 접속운영체제에 맞는 설치 파일 다운로드 후 실행설치가 완료되면 실행 후 기본 폰트, 테마, 확장팩 설치 가능추천 확장팩:Live Server: HTML 파일을 저장할 때마다 브라우저가 자동으로 새로고침 되어 실시간 확인이 가능Prettier: 코드 자..