DDODDO LAB

SCSS와 CSS가 함께 쓰인 프로젝트 정리 방법

(고도화 실전: 레거시 정리 루틴)고도화 프로젝트를 들어가면 흔히 이런 상태다.어떤 사이트는 SCSS어떤 사이트는 CSS공통은 여기저기서 불러오고파일명/경로 규칙도 제각각이 상태에서 “그냥 수정”부터 하면 중반부터 충돌과 중복이 폭발한다.정리는 코딩 전에 해야 한다. 1. 먼저 “목표”를 정하자 (중요)혼재 프로젝트 정리는 2가지 선택지 중 하나다.A. 완전 통합(추천: 신규/대규모 개편)모든 스타일을 SCSS로 통일구조 재설계 가능초기 비용 ↑ / 유지보수 효율 ↑B. 병행 운영(추천: 고도화/기간 촉박)기존 CSS 유지신규(v2/v3/v4 등)만 SCSS로 구성리스크 ↓ / 속도 ↑공공기관 고도화는 대부분 B가 현실적이야.2. “현재 상태”를 30분 안에 지도 그리기체크어디가 SCSS인지 / 어디..

공공기관 고도화 실전: 여러개 사이트 병행할 때 반드시 먼저 할 일

공공기관 고도화 실전: 시작 전에 반드시 해야 할 5가지공공기관 고도화 프로젝트는“디자인 나오면 코딩 시작”이 아니다.시작 전에 구조를 정리하지 않으면프로젝트 중반부터 무너진다.실제 실무 기준으로 정리한다. 1. 기존 구조부터 해부하라고도화인데기존 구조를 안 보면 100% 문제 난다.확인해야 할 것:CSS / SCSS 혼용 여부공통 include 방식레이아웃 고정폭인지 유동폭인지v2 / v3 병행 폴더 존재 여부중복 컴포넌트 존재 여부>> 기존 공통 파일을 먼저 정리해야 한다. 2. 반응형 전략을 통일하라공공기관은 대부분 PC First 구조다.확인할 것:min-width / max-width 혼재 여부실제 브레이크포인트 값1024 / 768 기준 적용 방식접근성 대응 방식전략 통일 없이 작업하면파일마..

공공기관 웹사이트 반응형이 PC First 구조인 이유

공공기관 웹사이트가 PC First 구조로 설계되는 이유 분석. 접근성, 인증, 레거시 유지보수 관점에서 반응형 전략 정리. 왜 공공기관 사이트는 아직도 PC First일까?최근 프로젝트를 진행하며여러 공공기관 사이트의 CSS 구조를 분석해봤습니다. 의외로 많은 사이트가Mobile First가 아닌 PC First 구조로 되어 있었습니다. 왜일까요? 단순히 “구식이라서”는 아닙니다. 1. 인증 및 보안 모듈이 PC 환경 기준공공기관은공동인증서행정 시스템 연계내부 업무 시스템등이 PC 환경 기준으로 설계되어 있습니다. 즉,주 사용 환경이 여전히 데스크톱 중심입니다. 그래서 기본 CSS가 PC 레이아웃이고,모바일은 보조 레이어로 처리합니다. 2. 접근성 검사 기준이 PC 화면 중심웹 접근성 인증 과정에서..

웹 퍼블리셔 전용 ChatGPT 프롬프트 모음

1. HTML 구조 생성용프롬프트: 접근성 기준에 맞는 관리자 테이블 구조 만들어줘 2. 반응형 계산용프롬프트:1920px 기준 28px을 320~1920 범위 clamp 값으로 계산해줘. 3. 리팩토링용프롬프트:아래 CSS 중복 제거하고 가독성 높게 정리해줘 4. 공공기관 기준 대응용프롬프트:웹 접근성 지침에 맞게 alt 텍스트 가이드 작성해줘.

웹 퍼블리셔 생산성을 2배 올려주는 실무 도구 정리 (내가 실제 쓰는 것들)

1. VS Code 확장 추천PrettierAuto Rename TagCSS PeekLive ServerGitLens2. CSS 계산/변환 도구clamp 계산 방식px → vw 계산법rem 변환3. 반복 작업 단축 팁Emmet 활용Snippet 등록브라우저 DevTools 활용법4. 정리 포인트도구를 잘 쓰는 사람이 빨리하는 게 아니라반복을 줄이는 사람이 빨라진다.

퍼블리셔를 위한 ChatGPT 프롬프트 작성법

웹 퍼블리셔가 ChatGPT를 실무 자동화 도구로 활용하는 방법. HTML 구조 생성, CSS 리팩토링, 반응형 설계용 프롬프트 템플릿 정리. ChatGPT를 써도 실무에 도움이 안 되는 이유많은 퍼블리셔가 이렇게 묻습니다.프롬프트버튼 코드 만들어줘그리고 결과가 마음에 안 들었다고 말합니다. 문제는 AI가 아니라질문의 구조입니다.퍼블리셔는 이렇게 질문해야 한다AI는 “검색 엔진”이 아니라 조건 기반 생성 도구입니다. ❌ 버튼 코드 줘⭕ 접근성 고려 + aria 속성 포함 + 모바일 대응 버튼 구조 만들어줘 질문이 구체적일수록결과는 실무에 가까워집니다.실무 자동화 프롬프트 템플릿1. HTML 구조 생성용프롬프트공공기관 기준 접근성을 고려한 게시판 테이블 HTML 구조 작성해줘.thead 8개, 모바..