SHIFT — AI Website Showcase
본문
개요
산업기술·B2B, 인테리어·공간, 로컬 F&B 세 업종의 웹사이트를 하나의 화면에서 전환해 비교할 수 있도록 만든 반응형 웹사이트 쇼케이스입니다. 색상만 바꾸는 방식이 아니라 업종마다 방문 목적과 필요한 정보가 다르다는 점을 기준으로 화면 구조와 콘텐츠 흐름을 각각 설계했습니다.
산업기술 사이트는 제품 정보 확인에서 견적 문의로, 인테리어 사이트는 공간과 시공 사례 탐색에서 상담 예약으로, F&B 사이트는 메뉴 발견에서 매장 방문으로 이어지도록 구성했습니다. 여러 웹사이트 레퍼런스에서 필요한 요소를 골라 방향을 정하고 Codex와 구현안을 주고받았으며, 완성된 화면은 데스크톱·노트북·모바일과 확대 환경에서 직접 검증하며 다듬었습니다.
구현
- 상단 업종 선택기를 통해 세 가지 웹사이트가 페이지 이동 없이 즉시 전환되도록 구현했습니다
- 선택한 업종을 URL에 동기화해 링크를 다시 열거나 공유해도 같은 화면이 표시되도록 구성했습니다
- 업종별로 정보 구조, 시각적 밀도, 주요 행동 버튼을 다르게 설계해 각 브랜드의 목적이 구분되도록 했습니다
- 세 업종 모두 라이트·다크 모드를 지원하고, 각 테마에서 텍스트와 주요 행동 버튼의 대비를 점검했습니다
- 데스크톱·태블릿·모바일 레이아웃과 브라우저 150%·200% 확대 환경을 확인하며 반응형을 검증했습니다
- 키보드 포커스와 ARIA 속성을 적용하고, 헤더를 접어도 주요 메뉴와 업종 선택 기능을 이용할 수 있도록 구성했습니다
- 화면 방향과 콘텐츠 우선순위를 정한 뒤 Codex와 구현안을 주고받았으며, 실제 화면에서 발견한 줄바꿈·정렬·대비 문제를 직접 검증하고 수정했습니다
발견하고 고친 것
노트북과 데스크톱, 라이트·다크 모드, 브라우저 확대 환경을 비교하며 일반 화면에서는 드러나지 않던 시각적 결함을 찾아 수정했습니다.
- 산업기술 화면을 200%로 확대했을 때 제품 정보와 오른쪽 사양 박스가 겹치는 문제를 레이아웃 재배치로 해결
- 인테리어 화면에서 브라우저 배율에 따라 장식선과 문장 위치가 어긋나고 줄바꿈이 달라지는 문제를 폭과 정렬 기준 조정으로 해결
- 로컬 F&B의 라이트 모드에서 원형 장식 밖으로 나온 문구가 배경과 구분되지 않는 문제를 색상 대비 조정으로 해결
- 산업기술 화면의 라이트 모드에서 주요 행동 버튼이 주변 요소와 구분되지 않는 문제를 배경색과 텍스트 대비 조정으로 해결
- 프로젝트 정보 모달이 여러 줄로 늘어나고 다크 모드가 적용되지 않는 문제를 레이아웃과 테마 스타일 수정으로 해결
트러블슈팅
메뉴를 선택하면 섹션 중간에 멈춤
상단 메뉴를 선택했을 때 섹션 제목이 아니라 콘텐츠 중간이 화면 상단에 맞춰지는 문제가 있었습니다. 업종마다 앵커가 서로 다른 요소에 지정돼 있었고, scroll-margin과 scroll-padding이 함께 적용되면서 헤더 높이가 중복으로 계산된 것이 원인이었습니다. 앵커를 각 섹션의 실제 시작 경계로 옮기고, 상단 여백 계산은 scroll-padding 한 곳에서만 담당하도록 통일해 해결했습니다.
헤더 상태에 따라 화면 위치가 달라짐
SHIFT 헤더를 펼쳤을 때와 접었을 때 고정되는 헤더의 수와 높이가 달라, 업종을 전환하거나 메뉴로 이동하면 같은 섹션도 서로 다른 위치에 표시됐습니다. 고정된 여백값으로는 두 상태를 모두 맞출 수 없었기 때문에 현재 화면에 표시된 헤더의 실제 높이를 측정하고, 전환이 끝난 뒤 그 값을 기준으로 스크롤 위치를 보정하도록 변경했습니다.