OBO
설명
디자인 에이전시 웹사이트
기간
Jan 2024 - Feb 2024 (1 month)
역할
- 에이전시 무드보드 구성 및 브랜드 톤 설정.
- 콘텐츠 정보 구조 기획 및 전체 디자인.
- 사용자 관점의 내비게이션 및 CTA 배치.
기술
HTML5 · CSS3 (Flex/Grid) · JavaScript (ES6+)
GSAP · ScrollTrigger · Locomotive Scroll · Swiper.js · AOS
Figma · Adobe Photoshop · Adobe Illustrator
JSON · Git · GitHub · Visual Studio Code
프로젝트 목적
OBO는 디자인 에이전시입니다. 그래서 사이트 자체가 첫 번째 증거가 됩니다. 구조를 일부러 단순하게 잡았습니다 — 명확한 그리드, 절제된 타이포그래피, 그리고 '누구인가 → 무엇을 만들었나 → 어떻게 연락하나'로만 이어지는 하나의 동선. 신뢰는 사이트가 무엇을 주장하느냐가 아니라 어떻게 조립돼 있느냐에서 나온다고 봤습니다.
범위
- · 전체 UI 디자인
- · 프론트엔드 개발
주요 기술 특징
구조적 UI
- · HTML과 CSS만으로 그리드 정렬 기반 인터페이스를 짰습니다.
미니멀 타이포그래피 & 레이아웃
- · 절제된 타이포 체계 위에서 여백이 레이아웃을 이끕니다.
명확한 사용자 흐름
- · 브랜드 소개에서 작업 사례를 거쳐 문의까지, 곁길 없이 한 갈래로 이어집니다.
디자인 포인트
구조적 UI
그리드 정렬이 화면을 구성합니다. HTML과 CSS 위에 아무것도 덧대지 않았습니다.
타이포그래피 & 여백
타이포 체계는 절제하고, 선이나 박스가 아니라 여백이 레이아웃을 끌고 가게 했습니다.
명확한 흐름
브랜드 소개, 작업 사례, 문의 — 그 순서 그대로, 빠져나갈 곁길은 두지 않았습니다.
갤러리
클릭하여 확대자주 묻는 질문
3D 인터랙티브 웹사이트는 일반 홈페이지와 무엇이 다른가요?
Three.js와 WebGL을 사용해 브라우저에서 3D 오브젝트가 움직이고 마우스와 스크롤에 반응하는 웹사이트입니다. 일반 홈페이지가 정보를 정리해 보여준다면, 3D 인터랙티브 웹은 브랜드의 인상을 체험으로 전달합니다. 패션, 뷰티, 건축, 전시처럼 브랜드 경험이 중요한 분야에서 효과가 큽니다.
웹사이트 제작 기간은 얼마나 걸리나요?
랜딩페이지는 7일, 5페이지 기업 웹사이트는 15일, 10페이지 3D 인터랙티브 웹은 30일을 기준으로 합니다. 자료를 전달받은 시점부터 기산하며 디자인 시안 확인과 피드백 일정에 따라 조정됩니다. 급한 일정이 있으시면 상담 시 말씀해 주시면 가능 여부를 먼저 확인해 드립니다.
호스팅, 도메인, 서버 비용은 따로 드나요?
SSL 보안 인증서 설치, 호스팅 세팅, 데이터베이스 구축은 무상으로 제공해 드립니다. 도메인 구입 비용만 의뢰인이 부담하시며 연 2~3만원 수준입니다. 계정은 처음부터 의뢰인 명의로 생성하므로 이후 담당자가 바뀌어도 서비스가 끊기지 않습니다.
완성 후 제가 직접 내용을 수정할 수 있나요?
관리자 페이지를 함께 구축해 드리므로 개발 지식 없이도 텍스트, 이미지, 게시물을 직접 수정하실 수 있습니다. 납품 시 관리자 사용 매뉴얼을 함께 전달해 드립니다. 화면 구조를 바꾸거나 새로운 기능을 추가하는 작업만 별도 개발이 필요합니다.