Underdrawing
decides everything.
홈페이지는 밑그림(기획)에서 갈립니다.
말 대신, 직접 그린 결과부터 보여드립니다.

SELECTED WORK
new works in progress
01 NEPER 네퍼 — 아날로그 신시사이저 (영문) 네퍼 아날로그 신시사이저 홈페이지 미리보기 영문 사이트 · GSAP 인터랙션
기획 — 디자인 — 개발
02 ONDO 온도 — 서촌 한옥 스테이 (영문) 온도 서촌 한옥 스테이 홈페이지 미리보기 영문 사이트 · 온도 인터랙션
기획 — 디자인 — 개발
03 AXIOM 액시엄 — 산업용 로보틱스 액시엄 산업용 로보틱스 홈페이지 미리보기 가로 스크롤 · 카운터
기획 — 디자인 — 개발
04 SIMJI 심지 — 조명 브랜드 심지 조명 브랜드 홈페이지 미리보기 인터랙티브 3D
기획 — 디자인 — 개발
05 Your project? 다음 밑그림 — 당신의 브랜드 무료 상담으로 시작 ↗
기획부터 개발까지 — 상담·설계·제작이 중간에 끊기지 않습니다 작업명에 마우스를 올려보세요
01

Fix the drawing.방문자를 잃는 네 가지 이유, 밑그림은 이렇게 고쳐 그립니다

예쁘게만 만든 홈페이지가 실패하는 지점들입니다.
문제마다 고치는 방법이 다릅니다.

첫번째 읽지 않는다
읽고 싶게 그린다

정보를 다 넣으면 다 읽는다고 생각하지만, 방문자는 화면을 훑고 지나갑니다.
다 말하려다 아무것도 남기지 못합니다.

불필요한 정보를 덜어내고 핵심 한 문장을 먼저. 3초 안에 '나한테 필요한 곳'이라는 판단이 서게 설계합니다.

두번째 믿지 않는다
믿을 근거를 그린다

고객은 직접 겪기 전까지 겉모습과 증거로만 판단합니다.
예쁜 것과 믿을 만한 것은 전혀 다른 문제입니다.

실제 후기 · 실제 사례 · 실물 사진으로 '진짜 하는 곳'이라는 근거를 화면에 쌓습니다.
없는 증거는 지어내지 않습니다.

세번째 행동하지 않는다
움직이게 그린다

마음에 들어도 '나중에'라고 미루는 순간, 그 고객은 대부분 다시 오지 않습니다.

예약 · 전화 · 문의 버튼을 망설일 틈 없는 자리에 두어 지금 움직이게 만듭니다.

네번째 찾지 못한다
AI가 찾아오게 그린다

이제 고객은 검색 결과를 하나하나 비교하지 않고 AI에게 묻습니다.
AI 답변에 없으면, 없는 브랜드와 같습니다.

네이버 · 구글은 물론 AI 검색(AEO)이 읽고 인용하기 좋은 구조로 정보를 정리해 설계합니다.

02

Promises, not numbers.숫자 대신, 일하는 방식으로 증명합니다

과장된 실적 광고 대신 세 가지를 약속합니다.
이 약속은 계약서에 그대로 들어갑니다.

약속 하나

처음부터 끝까지 한 흐름

영업 따로 제작 따로 넘기지 않습니다.
상담·기획·제작·오픈이 한 흐름으로 이어져, 말이 중간에 사라지지 않습니다.

약속 둘

지어내지 않는 화면

없는 후기, 부풀린 수치를 화면에 넣지 않습니다.
신뢰는 진짜 재료로만 쌓입니다 — 그래야 사이트가 오래갑니다.

약속 셋

범위가 명확한 계약

수정 횟수 · 일정 · 인수인계 범위를 계약서에 못 박습니다.
'해주기로 했잖아요'가 생기지 않는 구조로 시작합니다.

이 스튜디오 이름이 밑그림인 이유 — 완성작의 수준은 붓질이 아니라 밑그림에서 정해진다고 믿기 때문입니다.
그래서 저희는 디자인보다 기획을, 화면보다 구조를 먼저 그립니다.

— 밑그림 드림 (대표 소개·이력은 준비되는 대로 이 자리에 들어갑니다)

03

Six steps.기획에서 오픈까지, 여섯 걸음

어디서 무엇을 결정하는지 처음부터 투명하게. 특히 두 번째 걸음에서 결과가 갈립니다.

걸음 1

무료 상담

지금 상황과 목표부터 듣습니다.
홈페이지가 정말 필요한지까지 솔직하게 말씀드립니다.

걸음 2

밑그림 (기획)

방문자 동선과 핵심 메시지를 먼저 그립니다.
이 단계가 결과를 가릅니다.

걸음 3

디자인 시안

업종과 고객에 맞는 첫 화면부터 확정하고 넘어갑니다.

걸음 4

개발 · 퍼블리싱

빠르고 잘 안 깨지는 정적 사이트로 만듭니다.
모바일 우선.

걸음 5

검수 · 오픈

실기기 확인, 검색·AEO 세팅, 도메인 연결까지 마무리합니다.

걸음 6

오픈 후 관리

계약한 수정 정책 안에서 대응합니다.
필요하면 유지보수도 함께.

04

Real work only.말보다 결과물 — 직접 만든 실제 화면

아래 영상은 세 사이트를 직접 스크롤하며 녹화한 실제 화면입니다.

SHOWREEL — 직접 만든 실제 화면 · 스크롤하면 커집니다
네퍼 아날로그 신시사이저 홈페이지 첫 화면 — 3분할 발광 패널과 부팅 인트로
작업 01 / 08

NEPER

네퍼 · 아날로그 신시사이저 (가상 브랜드)

'손에 답하는 악기'라는 컨셉을 GSAP 인터랙션 최대치로 구현한 영문 제품 런치 사이트입니다.
로드되면 장비가 켜지듯 3분할 패널이 순차 점등하고, 스크롤을 내리면 필터·시퀀서·파형이 캔버스로 살아 움직입니다.

부팅 인트로 · 핀 서사 3막 · 캔버스 파형 · DSEG 카운터 · 영문 · AEO 세팅
온도 서촌 한옥 스테이 홈페이지 첫 화면 — 한옥 지붕 히어로와 데워지는 색온도
작업 02 / 08

ONDO

온도 · 서촌 부티크 한옥 스테이 (가상 브랜드)

크림 에디토리얼 톤으로 서촌의 부티크 한옥 스테이를 영문 사이트에 담았습니다.
페이지를 열면 사진이 차가운 톤에서 따뜻한 톤으로 데워지고, 스크롤을 내릴수록 화면 전체의 색온도가 서서히 올라갑니다.

쿨→웜 색온도 인트로 · 스크롤 온도 인터랙션 · 라인 지도 · 영문 · AEO(FAQ) 세팅
심지 조명 브랜드 홈페이지 첫 화면 — 실시간 3D 펜던트 조명
작업 03 / 08

SIMJI

심지 · 조명 브랜드

어둠 속에서 조명이 하나씩 켜지는 순간을 실시간 3D로 구현했습니다. 스크롤을 내리면 카메라가 제품 앞까지 다가가고, 제품은 360°로 돌려볼 수 있습니다.

실시간 3D (three.js) · 점등 인터랙션 · 360° 제품 뷰어
커퓨 남성 스트릿웨어 홈페이지 첫 화면 — 야간 거리 히어로와 통금 시계
작업 04 / 08

CURFEW

커퓨 · 남성 스트릿웨어 브랜드

'밤 10시 이후'라는 통금 세계관을 사이트 전체에 입혔습니다.
22시부터 06시 사이에 접속하면 사이트가 스스로 야간 모드로 바뀌고, 룩북에서는 커서가 손전등이 되어 어둠을 비춥니다.

야간 모드 자동 전환 · 손전등 커서 룩북 · 드랍 커머스 UI (4페이지)
에이텀 인테리어 리모델링 홈페이지 첫 화면
작업 05 / 08

ATÉ

에이텀 · 아파트 리모델링 프리미엄

다크 톤과 정제된 타이포로 '실사급 3D 설계'라는 프리미엄 신뢰를 시각화했습니다.

프리미엄 다크 UI · 시공사례 갤러리 · 상담 동선
달무늬 고양이카페 홈페이지 첫 화면
작업 06 / 08

Dalmuni

달무늬 고양이카페 · 카페 브랜드 사이트

고양이의 시간이 먼저인 공간. 감성 사진과 부드러운 모션으로 '조용한 오후'를 첫 화면에 담았습니다.

감성 브랜딩 · 스크롤 인터랙션 · 반응형
멍톤 대형견 펫카페 홈페이지 첫 화면
작업 07 / 08

MUNGTONE

멍톤 · 대형견 펫카페

밝고 활기찬 컬러와 인터랙션으로 '뛰어놀 준비 됐나요?'라는 에너지를 전면에 세웠습니다.

활기찬 컬러 · 마이크로 인터랙션 · 예약 유도
액시엄 산업용 로보틱스 홈페이지 첫 화면 — 다크 용접 히어로와 라임 액센트
작업 08 / 08

AXIOM

액시엄 · 산업용 로보틱스 (B2B)

'조명 없이 24시간 돌아가는 무인 공장'이라는 컨셉을 다크 산업 톤과 라임 단일 액센트로 시각화했습니다.
스크롤에 반응하는 가로 슬라이드와 0에서 실적까지 올라가는 카운터로 규모감을 전달합니다.

가로 스크롤 핀 · 숫자 카운터 · 크로스헤어 그리드 · AEO 세팅

각 케이스를 왜 그렇게 그렸는지까지 — 포트폴리오 페이지에서 보기 ↗

05

Three plans.목적에 맞게, 세 가지

필요 없는 걸 끼워 팔지 않습니다.
규모와 목적에 맞는 것만.

랜딩 페이지

한 페이지 집중형 · 약 2~3주
  • 원페이지 기획 · 디자인
  • 반응형 (모바일 우선)
  • 기본 검색 최적화
  • 문의 · 예약 버튼 연동
₩ 1,500,000
상담 문의 ↗
가장 많이 찾는

브랜드 사이트

여러 페이지 브랜딩 · 약 3~4주
  • 멀티 페이지 구성
  • 브랜드 톤 · 무드 설계
  • 검색 + AI 검색(AEO) 기본
  • 예약 · 문의 동선 설계
  • 오픈 후 사용 안내
₩ 2,800,000
상담 문의 ↗

기업 홈페이지

회사 소개 · 신뢰 중심 · 약 3~4주
  • 회사 소개 구조 설계
  • 사례 · 연혁 · 조직
  • 검색 + AI 검색(AEO)
  • 문의 폼 · 개인정보처리방침
  • 애널리틱스 설치
₩ 3,200,000
상담 문의 ↗

* 표시 가격은 기본 구성 기준입니다.
실제 견적은 페이지 수·기능에 따라 상담에서 확정됩니다.

06

Questions?자주 묻는 것들

홈페이지 하나 만드는 데 얼마나 걸리나요?+
규모에 따라 다르지만 보통 랜딩은 2~3주, 여러 페이지는 3~4주입니다.
기획 단계에서 일정을 먼저 확정하고 시작합니다.
왜 그렇게 '밑그림(기획)'을 강조하나요?+
예쁜 화면은 도구일 뿐입니다.
방문자가 읽고·믿고·행동하는 구조가 없으면 매출로 이어지지 않습니다.
그래서 디자인보다 기획을 먼저 합니다.
AEO(AI 검색 최적화)가 뭔가요?+
이제 사람들은 검색창뿐 아니라 AI에게도 물어봅니다.
AI가 답할 때 내 브랜드가 인용되도록 페이지 구조와 정보를 정리해 두는 작업입니다.
수정은 몇 번까지 되나요?+
계약할 때 포함되는 수정 횟수를 명시합니다.
무한 무료 수정은 서로에게 좋지 않아서, 범위를 정해 투명하게 진행합니다.
만들고 나면 관리가 어렵지 않나요?+
정적 사이트라 빠르고 잘 안 깨집니다.
도메인·호스팅은 클라이언트 명의로 인수인계하고, 필요하면 유지보수도 도와드립니다.

Your project?다음 밑그림은 당신의 브랜드입니다

빠르게 물어보기

지금 바로 카카오톡으로.
홈페이지가 정말 필요한지부터 솔직하게 봐드립니다.

카카오톡 상담 ↗

정식으로 문의 남기기