Visual widget reference from NETCITY home

비쥬얼위젯 디자인

NETCITY 메인 화면의 캠프 위젯처럼 큰 이미지, 정보 카드, 상태 표시, 제어 버튼을 하나의 시각 블록으로 구성하는 기준을 정리합니다.

Board 레이아웃

WHITE BASE RESPONSIVE ASSET READY BOARD LOG

Menu8 Board0 RouteWD

01Landing
Frame

02Gallery
Board

03Style
System

04Mobile
Ready

05Content
Flow

06Publish
Log

캠프 위젯 레퍼런스

index.php에 노출되는 캠프 위젯 영역만 캡쳐해 비쥬얼위젯의 기준 화면으로 사용합니다.

캠프 위젯은 대형 타이틀, 짧은 설명, 기능 카드, 우측 비주얼, 하단 상태값과 컨트롤을 한 번에 보여줍니다. 웹디자인 페이지에서는 이런 구성을 홍보 영역, 방송 상태, 서비스 소개 위젯으로 재사용할 수 있게 정리합니다.

SOURCE / index.php WIDGET / latest_camp.php CAPTURE / CAMP AREA

캡쳐는 주변 페이지 요소를 제외하고 캠프 위젯 부분만 남겼습니다.

눈에 들어오는 장면을 만들되, 운영자가 반복해서 바꿀 수 있는 단위로 나눕니다.

시각 블록 큰 타이틀과 대표 이미지를 먼저 배치해 사용자가 어떤 콘텐츠인지 바로 알 수 있게 합니다.

정보 카드 핵심 기능은 2~4개의 짧은 카드로 분리해 읽는 속도를 높입니다.

상태와 제어 하단 상태값, 슬라이드 버튼, 재생 제어처럼 움직이는 위젯에 필요한 조작부를 함께 설계합니다.

웹디자인 페이지는 흰 배경에서 정보가 깨끗하게 읽히도록 기획, 구조, 시각화, 검수 순서로 확장합니다.

01 캡쳐 운영 중인 위젯에서 기준이 되는 화면만 잘라 레퍼런스 이미지로 보관합니다.

02 구획 타이틀, 설명, 카드, 이미지, 컨트롤 영역을 명확한 단위로 나눕니다.

03 반응형 모바일에서는 이미지와 카드가 자연스럽게 세로로 전환되도록 기준을 잡습니다.

04 재사용 방송, 사이트 소개, 지역정보 같은 다른 페이지에서도 같은 패턴을 확장합니다.

비쥬얼위젯은 보기 좋은 장면과 실제 운영 편의가 함께 맞아야 합니다.

실제 화면 기준 샘플 이미지만 쓰지 않고 현재 사이트에서 쓰이는 위젯 화면을 기준으로 품질을 확인합니다.

가벼운 출력 캡쳐 이미지는 페이지 설명용으로 쓰고, 실제 위젯은 필요한 화면에서만 동작하도록 분리합니다.

레이아웃, CSS, 이미지, 메뉴 변경 기록을 게시판에 누적합니다. 현재 0개 기록이 준비되어 있습니다.

게시판 테이블은 준비 중입니다.