블로그 · 프로젝트 사례 ·

조이팩: 도면에서 박스까지

평면 도면이 세 가지 박스 구조로 이어지는 여정을 담았습니다. 포장재 제조사를 위한 영어·한국어 웹사이트입니다.

골판지 상자, 칸막이, 맞춤 인서트로 구성한 조이팩의 세 가지 3D 제품 모델

제품으로 전하는 회사의 일

조이팩은 오번과 가까운 앨라배마주 오펠리카의 포장재 제조사입니다. 앨라배마와 조지아의 기업에 포장재를 공급합니다. 어떤 제품을 만들고 어떤 공정으로 제작하는지 확인한 뒤 포장 상담으로 이어지도록 웹사이트를 구성했습니다.

제품
3가지 포장 구조
언어
영어·한국어
작업 범위
웹사이트·3D 모션·지역 검색 기반 구축
결과
웹사이트 공개 완료

joypackinc.com에 공개했습니다. Search Console과 GA4를 연결하고 성과 측정을 시작했습니다.

회사 소개서에서 시작했습니다

회사 소개서의 제품 사진과 설비, 제작 순서를 바탕으로 작업했습니다. 골판지 상자, 칸막이·디바이더, 맞춤 상자·인서트의 세 가지 제품군으로 자료를 정리했습니다.

세 가지 시안에서 하나의 흐름으로

A안은 공정을 한 단계씩 보여주고, B안은 차분한 편집 구성으로 풀었습니다. 최종 B2안에서는 한 박스가 스크롤을 따라 이동하며 제품과 공정을 연결합니다.

파란 박스 도면과 Every product starts with a box 제목이 있는 조이팩 첫 화면
최종 첫 화면은 브랜드 메시지와 평면 박스 도면으로 시작합니다.

도면이 제품이 되는 순간

스크롤을 내리면 도면이 칸막이 상자로 접히며 제품 섹션의 가운데로 이동합니다. 양옆으로 다른 두 구조가 나타납니다. 제품을 선택하면 가운데에서 펼쳐지고, 다시 누르면 접힙니다. 자동 재생으로도 각 구조를 차례로 볼 수 있습니다.

웹사이트의 실제 박스 렌더러로 녹화한 15초 영상입니다. 도면이 제품 모음으로 완성된 뒤 골판지 상자가 펼쳐지고 다시 접히는 모습을 볼 수 있습니다.

모델은 포장 구조를 설명하기 위한 시각 자료입니다. 치수가 확정된 생산 도면이나 공인 하중 시험 결과를 뜻하지 않습니다.

설비 사진은 실제 모습을 지켰습니다

설비 사진은 배경과 기기 형태를 유지하고 선명도만 절제해 보정했습니다. 접착·스티칭 기계가 눌려 보이지 않도록 소개서의 표시 비율을 기준으로 조정했습니다.

작은 화면에서도 이해할 수 있게

제품 모션은 일시 정지하거나 이름이 표시된 버튼으로 조작할 수 있습니다. 기기의 동작 줄이기 설정을 따르고, 렌더링이 지원되지 않으면 정적인 제품 모음을 보여줍니다. 애니메이션 없이도 설명과 문의 링크를 읽을 수 있습니다.

지역에서 찾기 쉬운 웹사이트로

영어와 한국어 페이지에 각각 주소, 제목, 설명과 언어 전환 링크를 넣었습니다. 오펠리카 주소와 월–금 오전 9시–오후 5시 영업시간, 앨라배마·조지아 납품 지역을 담고 업체 정보 구조화 데이터도 적용했습니다.

joypackinc.com에 사이트를 공개하고 GA4와 Search Console을 연결했습니다. 현재 확인된 결과는 웹사이트 공개와 측정 기반 구축입니다. 검색 노출과 실제 상담 문의의 변화는 충분한 기간을 두고 확인할 예정입니다.

다른 프로젝트 사례.

  1. 낮에 들어 올린 Cafe Mallow의 아이스 음료 두 잔. 비스킷을 올린 말차와 크림을 올린 아이스커피

    · 프로젝트 사례

    Cafe Mallow: 공개 7일 만에 재료 소진, 첫 7일 검색 성과

    공개 후 첫 7일, 검색 노출 3,998회와 클릭 337회. 평균 검색순위는 첫 기록 5.7위에서 첫 7일 평균 3.2위로, 2.5계단 올랐습니다.

    읽기
  2. 검은 대리석 위 흰 접시에 담긴 넓은 돈가스에 소스를 붓는 King Katsu 사진

    · 프로젝트 사례

    킹카츠랜드: 세 가지 시안과 첫 검색 현황

    두 지점을 위한 세 가지 디자인 방향을 코드로 만들었고, 지점마다 주문 링크를 달았습니다. 9월 25–27일에 62명이 주문 버튼을 눌렀습니다. Daly City 34명, Newark 28명입니다.

    읽기
  3. 쇼지 문이 있는 밝은 일본식 식당의 테이블에 놓인 도시락과 녹차

    · 프로젝트 사례

    Midori Sushi: 오스틴의 27년 전통 정통 스시집의 재단장

    1999년에 문을 연 오스틴 스시 레스토랑과 검색할 수 있는 210개 메뉴. 3일 단위로 비교하면 검색 노출이 65% 늘었고 평균 순위는 10.4위에서 8.5위로 올랐습니다.

    읽기
  4. 짙은 빨간 테이블에 놓인 양념치킨, 떡볶이와 곁들임 음식

    · 프로젝트 사례

    Cocobang: 샌프란시스코의 밤에 만나는 서울의 맛

    2026년 9월 22일에 등록한 도메인으로 문을 연 심야 한식당 웹사이트. 9월 26일에는 구글 노출이 하루 830회였고, 최근 3일 동안 40개 검색어에서 1위였습니다.

    읽기
  5. 뉴스 피드, 투자 캘린더, 프로필을 보여주는 SAVE 출시 당시 모바일 디자인

    · 프로젝트 사례

    SAVE: 출시를 위한 웹사이트·앱 디자인

    투자 뉴스 플랫폼의 출시 디자인입니다. 2026년 9월 기준 Google Play 다운로드 10만+, 한국 App Store 평점 4.8, 금융 77위입니다.

    읽기
  6. 2026년 9월 12일 캡처한 GSDAQ 웹 앱. 뉴스 피드, 시장 대시보드, 경제 캘린더

    · 프로젝트 사례

    GSDAQ: AI 주식 리서치 플랫폼의 디자인·개발·런칭

    AI 주식 리서치 플랫폼 GSDAQ의 웹사이트·웹 앱·iOS 앱을 디자인하고 개발했습니다. 컨텐츠 제작과 앱스토어 런칭도 담당합니다.

    읽기
프로젝트 문의

우리 가게를,
제대로 알리세요.

어떤 가게인지, 무엇을 개선하고 싶은지 알려주세요. 몇 줄이면 시작할 수 있습니다.

카카오톡으로 상담하기 213-222-3086
mik.프로젝트 상담
어떤 언어로 상담하고 싶으신가요?

편하게 이야기할 수 있는 언어를 골라 주세요.

가게를 소개해 주세요.

개업 준비 중이어도 괜찮습니다. 이름과 동네부터 알려 주세요.

오픈 준비 중이라면 도시와 동네만 알려주셔도 됩니다.
어떤 도움이 필요하신가요?

짧게 적어 주셔도 됩니다. 자세한 내용은 함께 정리하겠습니다.

어디로 연락드리면 될까요?

프로젝트 상담에 대한 답변을 보내는 데 사용합니다.

이 내용으로 문의할까요?

보내기 전에 각 답변을 다시 확인하고 수정할 수 있습니다.

입력하신 정보는 프로젝트 검토와 이메일 답변에 사용합니다.