국경 없이 나를 표현하는 글로벌 크리에이터 채널 웹 서비스

Globy.me의 “전세계에 나를 표현하세요”라는 메시지를 바탕으로 채널, QR 명함, 글로벌 Poll, 번역 채팅을 한 곳에서 이용할 수 있도록 구축한 크리에이터 플랫폼 웹 서비스입니다. 메인 화면은 Global Feed → Globy QR Pass → 국가별 탐색 필터 → 인기 추천 채널 → 실시간 글로벌 인기 Poll 순으로 구성해, 처음 방문한 사용자도 지금 전세계에서 일어나는 이야기를 바로 확인할 수 있도록 했습니다. 특히 Home, Explore, Channels, Poll, Trending, Chat의 여섯 메뉴로 기능을 나누고, 오렌지 포인트 컬러와 Pretendard 서체, 국기 이모지 필터로 여러 나라의 사용자가 직관적으로 쓸 수 있는 화면을 완성했습니다.

#Globyme
#크리에이터플랫폼
#글로벌서비스
#QR명함
#번역채팅
#Poll
#웹서비스개발
#PWA
#반응형웹
#UIUX

Client: Globy.me
Category: 기타

Design Concept

국경을 넘는 나의 채널

언어와 국가가 다른 사용자가 같은 화면에서 자연스럽게 소통하는 경험을 디자인의 출발점으로 삼았습니다.
밝은 화이트 바탕에 오렌지 브랜드 컬러를 포인트로 쓰고 Pretendard 서체로 정리해, 어느 나라의 사용자에게도 가볍고 명확하게 읽히도록 했습니다.
또한 Home, Explore, Channels, Poll, Trending, Chat을 같은 상단 구조로 묶어 사용자가 원하는 기능으로 바로 이동하고, 채널 만들기와 Poll 참여까지 자연스럽게 이어지도록 설계했습니다.

Design Elements

01

국가별 글로벌 탐색 필터

전체, 대한민국, 미국, 일본, 중국, 베트남, 태국을 국기 이모지 필터로 정리했습니다.
텍스트를 읽지 않아도 관심 국가의 피드와 채널을 바로 고를 수 있습니다.
02

QR Pass 명함 카드

globy.me/@ID 하나로 QR 명함, 구독, 후원, 채팅이 연결된다는 점을 하나의 카드로 보여 줍니다.
사용자가 자신의 채널을 만드는 첫 동선을 화면 상단에서 바로 시작할 수 있습니다.
03

Poll과 번역 채팅 화면

진행 중, 마감, 정산 완료 상태로 Poll을 나누고 참여 내역과 내 Poll을 함께 제공했습니다.
채팅은 최근 대화 순으로 보여 주고 원하는 언어로 번역해 볼 수 있도록 안내했습니다.

Responsive

디바이스 대응

PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.

Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일

Design System

컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.

Colors

Main Color#FA541C

Sub Color#FF7A45

Point Color#009767
Deep Orange#E5470F
Ink Black#121212
Warm Gray#8C8C8C
Soft White#F5F5F5
White#FFFFFF

Typography

Aa 가나다 Pretendard

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Main Page

메인 페이지

첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.

www.example.com

스크롤하여 전체 보기 ↓

Sub Page

서브 페이지

주요 서브 페이지를 같은 규칙으로 설계했습니다.

02 Pages

국경 없이 나를 표현하는 글로벌 크리에이터 채널 웹 서비스 서브 페이지 1 — Sub Page 채널 페이지 01

국경 없이 나를 표현하는 글로벌 크리에이터 채널 웹 서비스 서브 페이지 2 — Sub Page 글로벌 Poll 페이지 02

Note

여섯 개의 주요 메뉴를 같은 화면 규칙 안에서 확장할 수 있도록 설계했습니다.

모든 서브 페이지는 상단 메뉴, 제목과 한 줄 설명, 국가 필터, 콘텐츠 목록의 순서를 동일하게 유지합니다.
페이지가 늘어나도 사용자가 같은 위치에서 같은 방식으로 기능을 찾을 수 있도록 했습니다.

Grid: 카드형 목록을 기준으로 채널, 게시물, Poll을 동일한 규칙으로 배치했습니다.
Header: 로고, 여섯 개 메뉴, 검색(⌘K)을 상단에 고정해 어느 페이지에서나 이동할 수 있도록 했습니다.
CTA: 내 QR Pass 만들기, Poll 만들기, 채널 찾기 버튼을 각 화면의 주요 위치에 두었습니다.

Mobile

모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.

Bottom Bar

하단 탭 메뉴Home, Explore, 작성, Poll, Chat을 화면 하단에 상시 노출

앱처럼 설치하는 웹웹앱 매니페스트와 앱 아이콘을 지원해 모바일에서 앱처럼 실행

Optimization

Menu

PCMenu · 상단에 여섯 개 메뉴와 검색을 한 줄로 배치

MOMenu · 하단 탭으로 자주 쓰는 기능에 엄지로 바로 접근
Layout

PCLayout · 넓은 화면에서 피드와 필터, 추천 채널을 함께 노출

MOLayout · 한 열 카드 흐름으로 스크롤 중심 탐색
Typography

PCTypography · Pretendard로 제목과 본문의 위계를 분명히 구분

MOTypography · 작은 화면에서도 읽히도록 크기와 줄 간격 조정
Image

PCImage · 국기 이모지와 아이콘 중심의 가벼운 시각 요소

MOImage · 터치하기 쉬운 크기의 아이콘과 필터 칩