DDODDO LAB

1920px 디자인을 clamp()로 자동 변환하는 방법 (퍼블리셔 실무 계산 공식 정리)

1920px 기준 디자인을 clamp()로 변환하는 실무 계산 방법 정리. 320px~1920px 반응형 폰트 및 여백 자동 계산 공식 포함. 1920px 디자인, 아직도 px 그대로 쓰고 있나요?디자이너가 1920px 시안으로 전달하면퍼블리셔는 이렇게 작업합니다./* CSS */font-size: 24px; 하지만 문제는모바일에서 비율이 깨진다는 것.그래서 필요한 게 clamp() 기반 유동값 설계입니다. clamp() 기본 구조/* CSS */font-size: clamp(최소값, 선형계산식, 최대값); 예시:/* CSS */font-size: clamp(16px, 1.25vw, 24px); 1920px 기준 24px을 자동 변환하는 방법기준 설정디자인 기준: 1920px모바일 최소: 320p..

ChatGPT를 웹 퍼블리셔 실무에 제대로 쓰는 방법

웹 퍼블리셔가 ChatGPT를 실무 자동화 도구로 활용하는 방법 정리. HTML 구조 생성, 반응형 설계, clamp 계산 자동화 예시 포함. ChatGPT를 검색용으로만 쓰고 있지는 않나요?많은 퍼블리셔가 ChatGPT를코드 오류를 물어보는 용도로만 사용합니다. 하지만 실무에서 진짜 중요한 건반복 작업을 줄이는 것입니다. HTML 구조 복붙,반응형 미디어쿼리 정리,clamp 계산,접근성 속성 체크…이건 “검색”이 아니라자동화 대상 작업입니다.왜 퍼블리셔에게 자동화가 필요한가실무를 하다 보면 이런 상황이 반복됩니다.게시판 HTML 구조 5개 이상 반복 제작반응형 브레이크포인트 매번 다시 작성px → vw → clamp 계산 반복레거시 CSS 구조 정리이 과정에서 가장 많이 쓰는 건“생각”이 아니라 “타..

퍼블리셔가 AI로 실무 자동화를 시작한 이유

6개월 정도 블로그를 쉬었습니다.그동안 가장 크게 달라진 건, AI가 실무에 들어오기 시작했다는 점입니다. 이제는 단순히 코드를 잘 짜는 것보다얼마나 빠르게 구조를 설계하고, 반복 작업을 줄이느냐가 중요해졌습니다. 저는 웹 퍼블리셔로서 공공기관 고도화와 반응형 설계를 진행하며반복되는 작업과 레거시 구조 정리에 많은 시간을 써왔습니다. 그리고 깨달았습니다. AI를 “검색용”이 아니라“실무 자동화 도구”로 써야 한다는 것. 앞으로 이 블로그에서는ChatGPT를 활용한 HTML 구조 생성반응형 설계 자동화 방법clamp 계산 정리공공기관 고도화 전략퍼블리셔 전용 프롬프트 정리같은 실무 중심 내용을 기록할 예정입니다. 이 블로그는AI를 활용해 퍼블리셔의 작업 시간을 줄이는 실험 기록이 될 것입니다.

리액트 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..

웹퍼블리셔의 업무 변화, AI 시대에 접어들다 GPT 도입 배경과 웹 퍼블리셔의 변화최근 웹 환경의 변화는 단순한 마크업 작업을 넘어 복잡한 반응형 UI 구성, 접근성 대응, 컴포넌트 구조화 등 고도화된 퍼블리싱 능력을 요구하고 있습니다. 하지만 여전히 현업에서는 정형화된 HTML 구조나 반복적인 작업이 적지 않게 발생하고 있습니다. 이러한 상황 속에서 ChatGPT를 포함한 생성형 AI는 웹 퍼블리셔의 작업 효율성을 극대화할 수 있는 실질적인 도구로 부상하고 있습니다.웹 퍼블리셔는 흔히 "디자인 가이드를 코드로 구현하는 사람"으로 정의되곤 합니다. 그러나 실무에서는 디자인 해석부터 크로스 브라우징, 반응형 대응, 웹 접근성 준수까지 요구되는 범위가 매우 넓습니다. 특히 대규모 프로젝트에서는 일정 압박..

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