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 구조 정리이 과정에서 가장 많이 쓰는 건“생각”이 아니라 “타..