Portfolio style workspace for NETCITY
웹디자인 포트폴리오 시스템
NETCITY의 웹 화면을 포트폴리오처럼 정리하고, 레이아웃과 스타일, 컴포넌트, 출시 점검 기록을 게시판으로 함께 관리합니다.
WHITE BASE
RESPONSIVE
ASSET READY
BOARD LOG
Menu8
Board6
RouteWD
01Landing
Frame
Frame
02Gallery
Board
Board
03Style
System
System
04Mobile
Ready
Ready
05Content
Flow
Flow
06Publish
Log
Log
웹디자인 작업 흐름
화면 제작 과정을 한 장의 포트폴리오와 하나의 게시판 기록으로 이어갑니다.
레이아웃
첫 화면, 콘텐츠 흐름, 하단 영역, 모바일 전환 기준을 잡습니다.
스타일가이드
색상, 글꼴, 간격, 버튼 톤을 페이지별로 흔들리지 않게 정리합니다.
컴포넌트
메뉴, 카드, 폼, 배너, 버튼처럼 반복되는 UI 단위를 관리합니다.
디자인 진행 흐름
웹디자인 페이지는 흰 배경에서 정보가 깨끗하게 읽히도록 기획, 구조, 시각화, 검수 순서로 확장합니다.
01
기획
페이지 목적과 첫 화면 신호를 먼저 정리합니다.
02
구조
섹션, 카드, 게시판 연결 흐름을 화면 단위로 나눕니다.
03
시각화
이미지, 아이콘, 여백, 색상 대비를 흰 배경에 맞춥니다.
04
검수
모바일, 링크, 이미지, 게시판 상태를 공개 전에 확인합니다.
기본 원칙
화면을 빠르게 만들면서도 나중에 수정하기 쉬운 기준을 남깁니다.
반응형 우선
모바일에서 글자 겹침과 버튼 넘침이 없는지 먼저 확인합니다.
실제 비주얼
페이지 주제를 보여주는 이미지나 캡처를 사용해 화면 목적을 즉시 전달합니다.
웹디자인 게시판
레이아웃, CSS, 이미지, 메뉴 변경 기록을 게시판에 누적합니다. 현재 6개 기록이 준비되어 있습니다.
CHECKLIST
출시 전 반응형 체크
390px 모바일 폭과 데스크톱 폭에서 제목, 버튼, 카드, 게시판 목록이 넘치지 않는지 확인합니다. 링크 이동, 이미지 로딩, 카테고리 필터, 글쓰기 경로를 함께 점검합니다. 검증 결과는 웹디자인 게시판에 누적합니다.
ASSET
이미지와 캡처 에셋 관리
페이지 주제를 보여주는 이미지, 캡처, 썸네일을 우선 사용합니다. 배너와 포트폴리오 프리뷰 이미지는 실제 화면 목적을 드러내도록 정리합니다. 파일명, 사용 위치, 교체 여부를 게시판 기록으로 남깁니다.
COMPONENT
컴포넌트 라이브러리 구성
메뉴, 버튼, 카드, 폼, 배너를 반복 가능한 단위로 관리합니다. 각 컴포넌트는 기본 상태, hover 상태, 모바일 상태를 함께 점검합니다. 같은 UI가 여러 페이지에 흩어지지 않도록 이름과 역할을 게시판에 기록합니다.
STYLE
스타일가이드 운영 메모
색상, 글꼴, 간격을 정리해 페이지마다 디자인 톤이 흔들리지 않도록 합니다.히어로 제목과 카드 제목 크기를 구분합니다.버튼과 태그는 역할별 색상을 유지합니다.이미지는 실제 화면 목적을 보여주는 비주얼을 우선합니다.
LAYOUT
페이지 레이아웃 점검 기준
새 페이지를 만들 때 첫 화면, 본문 섹션, 반복 카드, 모바일 전환을 함께 확인합니다.첫 화면에서 페이지 목적이 보이는지 확인합니다.본문 섹션은 전체 폭 흐름과 반복 항목으로 나눕니다.모바일에서 제목과 버튼이 넘치지 않게 합니다.
OVERVIEW
웹디자인 작업 페이지 기본 구조
NETCITY 웹디자인 작업을 레이아웃, 스타일가이드, 컴포넌트, 체크리스트로 나누어 관리합니다.상단 메뉴는 /web-design/ 페이지로 연결합니다.세부 페이지는 같은 메뉴와 같은 게시판을 공유합니다.디자인 변경 기록은 이 게시판에 누적합니다.