고객과 함께한 시간
메타맵시
디자인아트플러스가 제작한 메타맵시 홈페이지 포트폴리오.
치수 정보와 이미지로 나와 닮은 3D 아바타를 만들고 옷을 가상으로 입어 보는 가상 피팅 서비스 메타맵시를 소개하는 반응형 브랜드 홈페이지입니다.
- CLIENT.
- 메타맵시
- Year.
- 2023
- 프로젝트 설명
- 디자인아트플러스는 가상 피팅 서비스 메타맵시(metamapsee)의 브랜드 홈페이지를 기획·디자인·개발했습니다. 간단한 치수 정보와 이미지로 나와 닮은 3D 아바타를 만들어 옷을 가상으로 입어 보는 낯선 기술을, 강렬한 기술 비주얼과 패션 사진으로 친숙하게 풀어 누구나 쉽게 가상 착용을 경험할 수 있다는 메시지가 먼저 전달되도록 설계했습니다. 반응형으로 구축했습니다.
[주요 구축 내용]
기술 브랜드 첫인상: 어두운 화면 위에 빛나는 데이터 형상과 로고를 올린 첫 화면으로, 가상 피팅을 만드는 기술 회사라는 정체성을 한 번에 전달
패션으로 푸는 소개: 분홍 배경의 패션 사진과 굵은 영문 「META MAPSEE」 타이포를 나란히 배치해, 기술 서비스를 옷 입는 즐거움의 이야기로 읽히게 구성
3D 아바타 설명 흐름: 사진과 짧은 설명에 Learn More 버튼이 같은 형식으로 반복되는 블록으로, 아바타 생성부터 가상 착용까지 차례로 이해하도록 설계
단순한 화면 구성: 메뉴를 짧게 줄인 상단과 넓은 흰 여백, 검정 푸터로 화면을 정리해, 방문자의 시선이 서비스 소개에만 모이도록 설계
FAQ
서비스를 쓰면 어떤 경험을 하게 되는지를 사진과 짧은 문장으로 먼저 보여 주는 것이 좋습니다. 새로운 기술 서비스는 설명보다 결과 장면을 보여 줄 때 방문자가 바로 이해합니다. 메타맵시 홈페이지는 옷을 입은 모델 사진과 「Try on your clothes」라는 문장으로 가상 피팅 서비스를 먼저 소개했습니다.
서비스 소개, 기술 설명, 소식, 제휴 문의가 기본 메뉴입니다. 패션 브랜드나 쇼핑몰과 협업하는 서비스라면 제휴 문의 창구가 눈에 잘 띄어야 합니다. 메타맵시 홈페이지는 Home, About, Solution, News, Contact 다섯 메뉴로 단순하게 구성하고 3D 아바타 소개 중심으로 구축했습니다.
기업 홈페이지가 회사 정보를 빠짐없이 전하는 데 집중한다면, 브랜드 홈페이지는 서비스의 분위기와 인상을 남기는 데 더 집중합니다. 그래서 브랜드 홈페이지는 글을 줄이고 사진과 영상, 타이포그래피를 크게 쓰는 경우가 많습니다. 메타맵시 홈페이지는 굵은 영문 타이포그래피와 패션 사진으로 브랜드 화면을 구성했습니다.
처음 보는 사람도 몇 초 안에 무엇을 하는 서비스인지 알 수 있게 핵심 기능을 한 문장으로 정리하는 것입니다. 기능이 여러 개라도 첫 화면에서는 가장 대표적인 하나만 보여 주는 편이 기억에 남습니다. 메타맵시 홈페이지는 「나와 가장 비슷한 3D 아바타를 생성하세요」라는 문장으로 서비스의 핵심을 전했습니다.
