Web Publisher Portfolio

디자인을 구조로 옮깁니다.
25개 프로젝트의 실제 마크업입니다.

커머스·B2B·관리자·모바일까지, 규모와 성격이 다른 화면들을 일관된 마크업 구조와 재사용 가능한 스타일 체계로 만들어 왔습니다. 아래 작업물은 모두 브라우저에서 바로 열어볼 수 있습니다.

정보 입력 필요 이름 · 경력 · 연락처는 확인 후 채워 넣어야 합니다.

작업물

화면을 받으면 먼저 반복 단위를 찾습니다. 헤더·카드·테이블·폼처럼 다시 쓰일 덩어리를 컴포넌트로 끊어두면, 페이지가 300장으로 늘어나도 스타일은 늘어나지 않습니다.

reboot · variables · component · layout · views 순으로 파티션을 나누고 진입 파일 하나에서 조립합니다. 규모가 큰 프로젝트일수록 이 구조가 유지보수 비용을 결정합니다.

납품물에는 항상 퍼블리싱 목록과 컴포넌트 가이드를 함께 넣습니다. 개발자가 어떤 마크업을 어디에 쓰면 되는지 문서 없이 바로 알 수 있게 합니다.

납품 전 전 페이지를 실제 브라우저로 돌려 끊어진 리소스와 콘솔 에러를 확인합니다. 이 아카이브도 같은 방식으로 25개 프로젝트 1,700여 페이지를 자동 점검했습니다.