DDODDO LAB

고도화 프로젝트 시작 전 체크리스트

고도화 프로젝트는“디자인 나오면 작업 시작”이 아니다. 시작 전에 무엇을 확인하느냐에 따라야근 여부가 결정된다. 이번 글은실제 공공기관 고도화 기준으로 정리한 체크리스트다. 1. 구조 체크✔ 기존 소스 분석CSS / SCSS 혼용 여부공통 파일 경로 구조v2, v3 등 병행 폴더 존재 여부GNB / Footer 공통 include 방식레이아웃 고정폭 or 유동폭이걸 안 보면나중에 “왜 여기만 다르지?” 지옥 시작. 2. 반응형 전략 확인✔ PC First인지 Mobile First인지미디어쿼리 기준 확인min-width vs max-width 혼재 여부브레이크포인트 개수1024 / 768 / 640 등 실제 적용값공공기관은 대부분 PC First 구조.시작 전에 전략 통일해야 한다. 3. 접근성 기준✔..

min-width vs max-width 차이점 정리 | 퍼블리셔는 언제 무엇을 써야 할까?

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:..

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를 활용해 퍼블리셔의 작업 시간을 줄이는 실험 기록이 될 것입니다.