시안으로 돌아가기

Independent design study · 2026

Front Row

무대 가까이의 열기를 느낀 뒤, 실제 제품을 바로 보고 탐색하는 Marshall 비공식 디자인 시안입니다. 분위기를 만드는 이미지와 제품을 설명하는 이미지의 역할을 다시 정리했습니다.

3실제 모델 · 자체 일러스트
3상세 페이지 유지
4주요 화면 너비 검증
0가격·구매 기능

Problem

제품이 보이지 않는 제품 카드

이전 시안에서는 제품명 옆에 사용 장면을 배치했지만, 제품 자체의 외관은 알 수 없었습니다. 붉은 조명과 크림색을 반복하면서 새로운 구도도 기존 분위기에 머물렀습니다.

Direction

무대 다음에, 바로 제품

방문자가 콘셉트를 해석하기 전에 제품을 알아볼 수 있도록 홈의 순서를 단순하게 바꿨습니다.

  1. 가까운 관객 시점, 큰 타이포, 백색 조명의 무대 히어로
  2. 독립적인 선택 카드와 Signal Journey를 덜어내고 제품을 바로 배치
  3. DSL40 Combo를 크게 소개한 뒤 Acton IV와 Monitor III A.N.C.를 나란히 소개
  4. 추천 질문과 서로 다른 장비군의 비교 체크박스를 제거하고 상세 링크 제공
  5. 제작·작은 공연장·Amplify 이야기를 간결한 공식 자료 링크로 제공

Images

현장과 제품, 각각의 이미지

히어로는 익명 연주자의 가상 공연 장면을 내장 ImageGen으로 제작했습니다. 백색 조명과 자연스러운 피부·옷감의 질감으로 기존의 붉은 조명과 따뜻한 색 보정을 벗어나도록 시도했습니다. 제품 영역은 처음에 공식 제품 사진을 로컬 검토용으로 썼지만, 공개 배포 이용허락이 없어 형태만 단순화한 자체 SVG 일러스트로 바꿨습니다. 로고와 브랜드 고유의 외관 요소는 넣지 않았습니다.

백색 조명 아래 작은 클럽의 연주를 가까이서 보는 히어로 장면
Hero · 자체 생성 공연 장면
DSL40 Combo를 단순화한 일러스트
DSL40 Combo · 자체 일러스트
Acton IV를 단순화한 일러스트
Acton IV · 자체 일러스트
Monitor III A.N.C.를 단순화한 일러스트
Monitor III A.N.C. · 자체 일러스트

제품 일러스트는 직접 그린 SVG이며 실제 제품과 세부가 다릅니다. 제품 사양은 각 상세 페이지에 공식 출처와 확인일을 함께 적었습니다.

Performance

첫 화면을 막던 웹폰트

Lighthouse 모바일 측정에서 성능이 68점, 첫 화면 표시가 5초대였습니다. 스크립트 차단 시간은 0ms였고, 원인은 웹폰트였습니다. 다른 도메인에서 렌더링을 막는 구글 폰트 CSS를 받은 뒤, 한글 본문 글꼴 Noto Sans KR을 유니코드 조각 단위로 페이지마다 16개, 약 280KB 내려받고 있었습니다.

  1. 한글은 기기의 시스템 글꼴(맑은 고딕, Apple SD Gothic Neo)로 바꿨습니다. 한글 제목은 Montserrat에 한글 글자가 없어 이미 시스템 글꼴로 표시되고 있었으므로, 제목과 본문의 한글 글꼴이 하나로 맞춰졌습니다.
  2. 영문 제목용 Anton과 Montserrat는 라틴 문자 범위만 담은 파일 두 개(56KB)를 직접 호스팅합니다. Montserrat는 쓰는 굵기 500·700·800을 가변 폰트 하나로 받습니다.
  3. 외부 도메인 연결이 사라져 preconnect와 렌더링 차단 폰트 CSS를 함께 걷어 냈습니다.
성능 점수 · 홈 / 앰프 상세
68 → 100 / 68 → 99
첫 화면 표시(FCP) · 홈
5.12초 → 1.48초
가장 큰 요소 표시(LCP) · 홈
5.12초 → 1.53초
폰트 요청 · 홈
16개 284KB → 2개 56KB

배포된 사이트에서 Lighthouse 13.5 모바일 기본 설정으로 페이지당 3회 잰 중앙값입니다(변경 전 2026-10-15, 변경 후 2026-10-16). 배포 전 로컬 서버 비교에서도 홈 67 → 98, 앰프 상세 68 → 100으로 같은 결과였습니다. 레이아웃 이동(CLS)은 전후 모두 0.001 이하입니다. 측정 조건과 원본 수치는 성능 측정 기록 에 있습니다.

Verification

현재 확인한 동작

Edge에서 390·768·1440·1920px 홈 화면과 390·1440px 상세 페이지를 확인했습니다. 홈 화면의 이미지 누락, 가로 넘침, 페이지 스크립트 오류는 없었습니다.

  1. 모바일 메뉴의 Enter 열기, Tab 순환, Escape 닫기와 포커스 복귀
  2. 앰프 앵커의 고정 헤더 간격과 세 제품 상세·목록 복귀 경로
  3. 모션 감소에서 히어로 이동 제거
  4. JavaScript 비활성 상태에서 메뉴와 제품 상세 이동
  5. 모바일과 데스크톱에서 해당 히어로 이미지 한 개만 요청
  6. 320~1440px에서 한글 단어가 음절 중간에서 끊기지 않음

npm test 통과. 성능 수치는 위 Performance 항목의 실험실 측정이며, 실제 사용자 테스트와 실사용 환경의 Core Web Vitals는 아직 수집하지 않았습니다.

시안 보기제품 영역 보기