Atelier & Co. Art Studio Website
Project Case Study
Atelier & Co. Art Studio Website
토론토 아트 스튜디오(키즈 아트 클래스) 마케팅 웹사이트. 프로그램 탐색, 월간 커리큘럼 공유, 신뢰 형성, 문의 전환을 중심으로 설계했으며 런칭 이후에도 요청 기반으로 지속 개선 중.
라이브 프로젝트 보기 →개요
Atelier & Co. 웹사이트는 토론토 지역 아트 스튜디오의 키즈 프로그램을 명확하게 소개하고, 방문자가 부담 없이 문의까지 이어지도록 설계한 마케팅 사이트입니다.
메인 페이지에서 스튜디오의 메시지와 톤을 정리한 뒤, Programs로 자연스럽게 연결되도록 구성했습니다.
이 프로젝트는 1달 이내 1인 개발로 초기 런칭했으며, 이후 운영 과정에서 들어오는 요청을 반영해 지속적으로 개선하고 있습니다.
목표
첫 화면에서 전문성과 신뢰를 빠르게 전달
방문자가 연령/프로그램 기준으로 빠르게 선택할 수 있는 구조 제공
월간 플랜(커리큘럼)을 통해 수업 경험을 예측 가능하게 제시
문의 전환을 방해하는 불확실성(운영/정책/스케줄)을 최소화
운영자가 콘텐츠를 지속적으로 업데이트하기 쉬운 페이지 구조 유지
사용자 맥락과 UX 제약
로컬 클래스/교육 서비스 웹사이트 방문자는 보통 다음 질문 순서로 움직입니다.
어떤 곳인가? 분위기와 신뢰는?
내 아이에게 맞는 프로그램이 있는가?
수업은 어떻게 진행되는가? (결과물이 예측 가능한가?)
일정과 비용은?
어떻게 문의/등록하는가?
사이트는 이 흐름을 기준으로 내비게이션과 섹션을 구성해, 방문자의 결정을 빠르게 돕도록 설계했습니다.
정보 구조(IA)
페이지 구성은 “탐색 → 확신 → 문의” 흐름에 맞춰 정리했습니다.
Programs: Regular Classes / Camps로 1차 분기
Regular Classes: 연령대별 반 구성과 운영 정보(스케줄/가격/정책)를 한 화면에서 확인
Camps: 시즌성 수요(방학/휴일) 중심으로 빠른 선택 제공
Who is Mi: 운영자/강사 소개로 신뢰 형성
Monthly Class Plan: 월간 테마로 수업을 ‘예측 가능’하게 제시
Testimonials: 후기 기반 신뢰 보강
Contact: 전화/이메일/주소/지도/SNS를 묶어 문의 전환
핵심 설계 결정
1) Programs에서 “선택을 빠르게 만드는 분기”
방문자의 첫 과제는 “내 아이에게 맞는 선택지”를 빠르게 찾는 것입니다.
Programs에서 Regular/Camps로 먼저 나누고, Regular는 연령대 기준으로 다시 정리해 탐색 부담을 줄였습니다.
2) Regular Classes에서 “결정에 필요한 정보”를 한 번에 제공
등록 결정을 좌우하는 정보(대상 연령, 클래스 형태, 스케줄, 가격, 정책)를 분산하지 않고 한 페이지에서 확인할 수 있도록 구성했습니다.
이는 문의 단계에서 반복 질문을 줄이고, 운영자 응대 부담도 함께 낮춥니다.
3) Monthly Class Plan으로 경험을 ‘보이게’ 만들기
수업 선택에서 가장 큰 불안은 “가서 뭘 하는지”입니다.
Monthly Class Plan은 주차별 테마를 제시해 수업 흐름을 예측할 수 있게 하고, 방문자가 수업 결과물을 상상할 수 있도록 돕습니다.
4) Contact는 폼보다 “즉시 연락 수단” 우선
로컬 비즈니스에서는 복잡한 폼보다 빠른 연락이 더 중요합니다.
전화/이메일/지도/SNS를 한 화면에 배치해 문의 전환을 단순화했습니다.
또한 이메일 문의는 Nodemailer 기반으로 연동해 운영 대응을 빠르게 만들었습니다.
기술 구현
사용 기술
| 영역 | 구현 | 비고 |
|---|---|---|
| 프레임워크 | Next.js 16 (Turbopack) + React 19 | 빠른 개발/빌드 사이클과 현대적 렌더링 |
| 언어 | TypeScript | UI/컴포넌트 안정성 및 유지보수성 |
| 스타일 | Tailwind CSS 3 | 일관된 디자인 토큰과 빠른 UI 반복 |
| 이메일 | Nodemailer | 문의/연락 플로우 서버 연동 |
| SVG | @svgr/webpack | SVG를 React 컴포넌트로 재사용 |
| 최적화 | @next/bundle-analyzer | 번들 분석 및 성능 점검 |
운영 관점 구현 포인트
콘텐츠 업데이트가 잦은 페이지(프로그램/월간 플랜)를 기준으로 구조를 설계해 유지보수 비용을 낮춤
반복 요청이 들어오는 영역(문구/섹션/동선)은 컴포넌트화하여 변경 범위를 제한
번들 분석 도구를 통해 이미지/아이콘/컴포넌트 사용량을 점검하고 개선 방향을 확보
지속 개선 방식
런칭 이후에는 운영 과정에서 들어오는 요청을 반영해 다음을 반복하고 있습니다.
콘텐츠 업데이트 및 문구 개선
모바일 가독성/탐색 동선 미세 조정
문의 전환 경로 단순화
성능/번들 점검과 불필요 리소스 정리
이 프로젝트는 “납품 후 종료”가 아니라 실제 운영 데이터를 바탕으로 계속 다듬는 living website 형태로 관리되고 있습니다.
Live: https://atelierandco.servith.com/
Role: Solo delivery (IA → UI → 운영 개선)