SLOWFORM & OFFBEAT
서버 업로드·수정 안내

독립적인 가상 브랜드 2개로 만든 정적 웹사이트입니다. 빌드, npm 설치, 데이터베이스 없이 HTML·CSS·JavaScript와 이미지 파일로 실행됩니다.

프로젝트	구성
SLOWFORM ↗	리빙 에디토리얼 커머스 / 상품 3개 / 상품 상세 / 분류 / 장바구니 / 콘텐츠→상품 연결
OFFBEAT ↗	라이프스타일 웹진 / 창작 기사 8편 / 카테고리 / 검색 / 저장 / 다음 기사 / 뉴스레터 데모

1. 서버에 올리기

ZIP을 압축 해제합니다.
압축 안의 index.html, README.html, slowform, offbeat, image-sources.json을 같은 폴더 구조로 업로드합니다.
서버의 웹 공개 폴더 안에 portfolio 폴더를 만든 뒤 모든 파일을 넣습니다. 기존 홈페이지 파일을 덮어쓸 필요가 없습니다.
https://내도메인/portfolio/에서 선택 화면을 확인합니다. 각 사이트는 /portfolio/slowform/, /portfolio/offbeat/로 접근할 수 있습니다.

폴더 구조를 유지하면 하위 경로에서도 작동합니다. 홈페이지 기본 문서는 index.html입니다. 별도 주소 재작성 설정은 필요하지 않습니다. 서버에서 HTML·CSS·JS·WebP·SVG 파일 제공만 허용하면 됩니다.

2. 파일 구조

index.html          두 사이트 선택 화면
README.html         이 안내 문서
image-sources.json  이미지별 원본 URL
slowform/
  index.html        메인 콘텐츠와 상품 목록
  styles.css        스타일과 반응형 레이아웃
  app.js            상품 상세·장바구니 동작
  favicon.svg
  assets/           WebP 이미지 6개
offbeat/
  index.html        메인 레이아웃
  styles.css        스타일과 반응형 레이아웃
  app.js            기사 8편·검색·저장·필터
  favicon.svg
  assets/           WebP 이미지 8개

3. 콘텐츠 수정 위치

SLOWFORM 상품: app.js의 catalog에서 이름·가격·설명·옵션을 수정합니다. 메인 목록은 index.html에 별도 작성되어 있으므로 상품명·가격을 함께 수정합니다.
OFFBEAT 기사: app.js의 stories에서 제목·카테고리·이미지·본문을 수정합니다. 커버·에디터 추천 등 고정 편집 영역은 index.html도 함께 수정합니다. id는 기사 주소에 사용되므로 유지하는 편이 좋습니다.
사진: 각 폴더의 assets 안에서 동일 이름으로 교체합니다. 확장자를 바꾸면 해당 HTML·JS의 경로도 함께 수정합니다.
브랜드 색: SLOWFORM의 주요 색은 #414b38, OFFBEAT의 주요 색은 #f44c27입니다.

4. 데모 기능의 범위

장바구니와 저장한 기사는 방문자 브라우저의 localStorage에만 저장합니다. 브라우저가 저장을 제한하면 현재 페이지에서만 동작합니다.
주문 구성 확인은 수량·금액 확인용입니다. 결제, 재고, 회원, 배송, 주문 데이터베이스는 연결되어 있지 않습니다.
뉴스레터는 입력 형식과 체크박스를 검사한 뒤 데모 완료 안내만 표시합니다. 이메일을 저장하거나 전송하지 않습니다.
인스타그램·유튜브 자동 수집이나 외부 추적 스크립트는 포함하지 않았습니다.
기사 주소는 offbeat/?story=record-hunting처럼 사용할 수 있습니다. 실제 매체 운영을 위한 기사별 검색 노출·공유 메타데이터와 CMS는 별도 구현 영역입니다.
두 사이트를 서로 다른 도메인에 독립 업로드하는 경우 푸터의 다른 프로젝트 링크와 안내 문서 링크를 해당 실제 주소로 변경합니다.

5. 이미지와 레퍼런스

사진은 Unsplash에서 제공하는 편집용 이미지를 사용하고 파일로 포함했습니다. 각 원본 주소는 image-sources.json에 있습니다. Unsplash 라이선스를 참고하세요. 상품 사진은 가상 상품을 설명하는 콘셉트 이미지이며 사진 속 실물의 판매자임을 뜻하지 않습니다.

웹진은 더에디트의 주제별 탐색과 커버·기사 목록의 편집 흐름을 참고했습니다. 로고, 명칭, 기사, 사진은 복제하지 않았습니다. SLOWFORM과 OFFBEAT은 이 포트폴리오의 콘셉트 이름이며 상표 등록·독점 사용 여부를 검증한 이름은 아닙니다.

6. 확인한 항목

PC 1440px / 모바일 390px 레이아웃, 가로 넘침, 이미지 경로, 상품 선택·수량·합계·삭제, 기사 읽기·검색·저장·분류, 뉴스레터 데모를 확인했습니다. 실제 서버 업로드 이후 도메인·HTTPS·캐시 설정에 따른 최종 확인은 필요합니다. Lighthouse 점수를 측정하거나 보장하는 결과물은 아닙니다.

제작일 2026-10-13 · 기존 케미컬가이 원본 파일 및 사이트와 분리된 프로젝트입니다.