정적 파일 기반 신규 퍼블리싱 · 반응형 보완

B2B 솔루션 웹사이트의 FAQ와 프로그램 소개를 빠르게 검수하는 데모

단일 HTML 안에서 신규 페이지 구조, 아코디언 FAQ, 아이콘형 프로그램 탐색, 태블릿·모바일 보완 상태, 서브폴더 병행 운영 라우팅까지 직접 확인할 수 있습니다.

#E8192C

2신규 정적 페이지

3핵심 Breakpoint

0CMS 의존성

5일예상 수행 기간

검수용 인터랙티브 목업

탭을 전환해 신규 퍼블리싱 범위와 운영 연결 방식을 한 화면에서 확인합니다.

카테고리 필터, 검색, 아코디언 열림 상태를 순수 JavaScript로 제어합니다. 정적 HTML 구조이므로 별도 CMS나 백엔드 없이 배포할 수 있습니다.

아이콘 기반 카테고리 목록, 선택된 프로그램의 상세 설명, 주요 기능 카드, 문의 연결 버튼을 포함합니다.

1280px 기준 레이아웃을 유지하되 980px, 640px 이하에서 그리드, 메뉴, 버튼, 카드 폭을 재정의해 가로 스크롤과 텍스트 겹침을 방지합니다.

섹션 간격, 연혁·조직·소개 카드의 열 수, 모바일 메뉴, 이미지 비율을 별도 Breakpoint로 정리하는 방식으로 적용합니다.

신규 파일을 서브폴더에 배치하고 웹 서버에서 해당 경로만 정적 파일로 우선 처리하면 기존 사이트를 유지한 채 병행 운영할 수 있습니다.

문의 버튼은 FAQ 경로로, 솔루션 탐색 아이콘은 프로그램 소개 경로로, 수행실적 더보기는 기존 운영 경로로 이동하도록 href를 점검합니다.

전략 진단

고객사의 현재 운영 구조와 비즈니스 목표를 분석해 우선순위, 적용 범위, 단계별 실행 계획을 제안합니다. 정적 소개 페이지에서는 이 정보를 명확한 카드와 CTA로 구성합니다.

현황 진단기존 콘텐츠와 화면 구조를 빠르게 분류합니다.

개선안 도출신규 페이지와 기존 페이지의 연결 흐름을 정의합니다.

검수 기준PC, 태블릿, 모바일별 체크리스트를 제공합니다.

운영 이관정적 파일 구조와 서버 반영 방식을 문서화합니다.

해상도 버튼을 눌러 메인 페이지 카드와 메뉴가 어떻게 재배치되는지 확인합니다.

✓상단 메뉴는 모바일에서 버튼형 메뉴로 축약

✓솔루션 카드는 3열, 2열, 1열로 자연스럽게 전환

✓텍스트 겹침과 가로 스크롤을 방지하는 폭 제한 적용

B2B Solution

정적 페이지와 기존 운영 사이트의 안정적인 병행

모든 주요 화면을 반응형 레이아웃으로 재정리합니다.

location /new/ {
  alias /var/www/static-new/;
  try_files $uri $uri/ /new/index.html;
}

location / {
  proxy_pass http://legacy_site;
}

Alias /new "/var/www/static-new"

<Directory "/var/www/static-new">
  Options FollowSymLinks
  AllowOverride None
  Require all granted
</Directory>

문의창 버튼

메인 페이지에서 FAQ 신규 경로로 연결합니다.

솔루션 탐색

아이콘 클릭 시 프로그램 소개 경로로 연결합니다.

수행실적 더보기

기존 운영 사이트의 지정 경로로 전환합니다.