CASE STUDY · 자체 제작

ONON STUDIO 웹사이트,
저희 홈페이지부터 저희 방식대로

홈페이지 만드는 회사라면, 자기 홈페이지부터 잘 만들어야겠죠. 지금 보시는 ononstudio.com은 고객 프로젝트와 똑같은 순서와 기준으로 만들었어요. 뭘 왜 그렇게 했는지 숨김없이 보여드릴게요.

자체 제작기획UI 디자인반응형 개발문의 연결검색 세팅AI 상담 연결
PC
모바일

목표: 처음 온 사람이 3초 안에 알게

처음 들어온 사람이 궁금한 건 딱 세 가지예요. 뭐 하는 곳이지? 얼마지? 어떻게 연락하지? 그래서 화려한 첫인상보다 이 세 질문에 바로 답하는 걸 목표로 했어요. 가격은 숨기지 않았고, 상담 버튼은 어느 화면에서든 손 닿는 곳에 뒀어요.

저희가 한 일

기획
뭘 먼저 보여줄지, 메뉴는 어떻게, 문구는 뭐라고
디자인
글꼴·색·여백 규칙, PC와 휴대폰 화면
개발
메인, 서비스 소개, 인사이트 글 페이지
문의 연결
상담 폼 → 고객관리 프로그램, 카카오톡 상담
검색 세팅
페이지별 검색 문구, 구글이 읽는 정보표, 사이트 지도
집계
진짜 문의와 카톡 버튼 클릭을 따로 세는 설정

보여주는 순서에도 이유가 있어요

손님이 "여기 맡겨 볼까?" 마음먹기까지 머릿속에서 일어나는 순서 그대로 놓았어요.

  1. 제작 사례
  2. 서비스
  3. 납품 문서
  4. 일하는 순서
  5. 일하는 원칙
  6. 가격
  7. 자주 묻는 질문
  8. 인사이트
  9. 상담 신청

먼저 결과물로 실력을 보여주고, 그다음 "믿고 맡겨도 될까?"에 답해요. 오픈 날 드리는 서류, 일하는 순서, 약속 6가지로요. 사람은 마음이 움직인 다음에야 가격을 따져요. 그래서 가격과 질문은 뒤쪽에, 상담 신청은 맨 끝에 뒀어요.

디자인하면서 정한 것들

가격은 1년 치까지 공개

만드는 값만 보여주면, 나중에 월 관리비 듣는 순간 믿음이 깨지잖아요. 그래서 만드는 값과 매달 값을 같이 적고, 매달 값이 필수인지 선택인지도 나눴어요. VAT·실비 조건은 가격표 바로 아래에 모았어요.

제목은 단단하게, 본문은 편하게

제목은 크고 단단하게, 본문과 버튼은 술술 읽히게. 주황색은 꼭 필요한 곳에만 아껴 썼어요. 꾸밈을 덜어낸 만큼 작업물과 가격이 또렷해져요.

장식 대신 작업물

첫 화면엔 저희가 만든 사이트를 진짜로 눌러 볼 수 있게 올렸어요. 말보다 화면이 빠르니까요. 움직임은 스크롤할 때 살짝 떠오르는 정도만 남겼어요.

포함과 별도를 나란히

가격 바로 아래에 뭐가 포함이고 뭐가 따로인지, 결제와 환불은 어떻게 되는지 나란히 적었어요. 계약 전에 생길 질문을 화면에서 미리 끝내려고요.

PC와 휴대폰은 따로 설계했어요

작은 화면에 줄여 넣는 게 아니라, 손이 닿는 방식부터 다르다고 보고 시작했어요.

문의를 망설이지 않게

구글과 AI도 읽기 쉽게

사람 눈에 보이는 화면 말고도, 구글이 회사를 정확히 이해하도록 뒤쪽을 정리했어요. 페이지마다 검색 문구를 따로 쓰고, 회사 정보·서비스·자주 묻는 질문을 구글이 읽는 정보표로 달았어요. 시안이나 백업 파일은 검색에 안 잡히게 막았고요.

오픈은 시작일 뿐이에요

사이트는 연 다음에 더 많이 바뀌어요. 새 글은 정한 시간에 올라가고, 메인엔 최신 글이 자동으로 걸려요. 문의가 어디서 오는지 보면서 문구와 순서를 계속 다듬어요. 고객님 사이트도 똑같이, 오픈 이후까지 같이 봐요.

이 기준 그대로, 고객님 홈페이지를 만들어요.

카카오톡으로 상담하기 →