★독학하는_프로그램공부기록/퍼블리싱
📚 퍼블리싱 공부 순서 가이드 (비전공자도 OK)
@Design Hae
2025. 5. 9. 11:52
728x90
1️⃣ HTML 구조 이해하기
- HTML5 기본 태그: div, span, header, footer, section 등
- 문서 구조: <head> 와 <body>의 차이
- 시맨틱 마크업 이해: 접근성 & SEO에 중요
📌 추천 키워드: W3Schools, MDN HTML Guide
2️⃣ CSS 기본 스타일링 배우기
- 선택자 사용법: .class, #id, div > p 등
- 박스모델(Box Model): margin, padding, border, content
- 색상, 폰트, 정렬 등 시각 스타일링
📌 Flexbox, Grid는 최우선 학습 대상
3️⃣ 반응형 웹과 미디어쿼리 익히기
- 화면 크기에 따라 유연하게 보이는 레이아웃 만들기
- @media 쿼리로 모바일/태블릿 대응
📌 실제 스마트폰 뷰포트에서 직접 테스트 해보는 게 중요
4️⃣ 간단한 인터랙션 – CSS 트랜지션 / 애니메이션
- :hover, :focus, transition, keyframes 등
- 버튼 누르면 색이 변하거나, 메뉴가 나타나는 기본 구현
5️⃣ 웹 접근성과 웹 표준 이해하기
- alt, label, aria 속성 활용법
- 시각장애인, 키보드 유저도 웹을 쉽게 쓸 수 있도록 고려
6️⃣ 버전 관리(Git) + 파일구조 다루기
- 실무에서는 Github, Gitlab으로 협업
- 폴더 구성 정리: index.html, style.css, img/, js/ 등
7️⃣ 간단한 협업 경험 or 실무 클론 코딩 프로젝트 도전
- 실제 사이트를 HTML/CSS로 구현해보며 감 잡기
- ‘인스타그램 클론’, ‘브랜드 랜딩페이지 클론’ 등으로 연습
💼 실무 예시: 퍼블리셔의 하루
🎯 프로젝트 예: 브랜드 프로모션 랜딩페이지 제작
업무 흐름 예시
- 기획서/디자인 시안 전달받음 (Figma, XD 등)
- 디자인에 맞춰 HTML/CSS 구조 잡음
- 반응형 뷰포트 세팅 (mobile-first or desktop-first)
- 퍼블리싱 중 문제 발생 시 디자이너와 상의 (예: 글자 겹침, 해상도 문제)
- QA 과정에서 브라우저별 테스트 (크롬, 사파리, IE, 삼성 브라우저 등)
- 개발팀에 HTML 전달 or Git 커밋
사용 도구
- VS Code (코딩 에디터)
- 크롬 개발자도구 (디버깅)
- Figma Inspect
- Github
📌 마무리 팁
- 퍼블리싱은 기초가 탄탄하면 실무도 수월해져요.
- 실무에선 디자인 해석력 + 협업 능력이 정말 중요해요.
- 일단 하나의 웹페이지를 처음부터 끝까지 코딩해보는 경험이 성장의 핵심!
728x90