Company Project@ 웹비즈 크리에이티브2023.11 — 2024.02

공공기관 웹 퍼블리싱

6개 기관 사이트 UI/UX 디자인 · 반응형 퍼블리싱

Role: 웹디자이너 · 퍼블리셔 (디자인 · 마크업 · PHP 연동)

Overview

공공기관 웹사이트를 디자인 시안부터 반응형 퍼블리싱까지 한 사람이 끌고 가는 일이었습니다. 기관마다 정보 구조와 접근성 요구가 달라 페이지 수가 많고 반복이 잦은데, 그만큼 공통 컴포넌트를 어디까지 묶을지 판단하는 기준이 생겼습니다. 산출물은 기관별 마크업 리스트로 관리했고, 각 페이지의 PC·모바일 시안과 퍼블리싱 결과를 함께 추적했습니다. 웹 접근성(A11Y)과 크로스 브라우징 대응이 상시 요건이었습니다.

이 프로젝트의 핵심

6개 기관 사이트 · 약 200개 페이지를 단독 퍼블리싱

이민재단(60) · 싸템(69) · 양구수목원(43) · 사회보장정보원(18) · 환경책임투자 플랫폼 · 코네틱

PC·모바일 시안과 퍼블리싱 산출물을 페이지 단위 마크업 리스트로 추적

진행 상태·갱신일·메뉴 경로까지 한 표에서 관리

웹 접근성(A11Y) 개선과 크로스 브라우징 대응을 상시 요건으로 처리

디자인 시안 · 반응형 마크업 · PHP 템플릿 연동 · 유지보수를 한 사람이 연결해 수행

자세히

기관별 산출물5

한국이민재단 KIIP

회원·평가안내·평가접수·알림마당·마이페이지·구술감독관 등 9개 대분류 60페이지

양구수목원

이용안내·추천코스·아카이브·체험학습·수목원 이야기·마이페이지 등 9개 대분류 43페이지

싸템

판매·구매·채팅·회원·마이페이지 등 10개 대분류 69페이지의 거래 플랫폼

사회보장정보원

홈·통합검색·소식알림·발간자료 등 5개 대분류 18페이지

환경책임투자 종합플랫폼 사용자 화면, 코네틱 메인

일하는 방식3

페이지마다 PC·모바일 시안, 퍼블리싱 산출물, 진행 상태, 갱신일, 메뉴 경로를 한 표로 묶어 관리

마크업은 전량 직접 작업하고, 리스트의 담당 표기는 후반 QA 검수자를 구분하기 위한 것

공공기관 특성상 요구되는 웹 접근성과 구형 브라우저 대응을 마크업 단계에서 반영

Tech Stack

HTML5CSS3JavaScriptPHPjQueryFigma

Links