SCROLL
DOWN

Client

GiGi(기기)

Released Date

2025

Role

Character , Logo, UI/UX

‘기기(GiGi)’ 홈페이지 구축

#기부플랫폼 #반응형웹 #회원기능 #간편로그인 #UI/UX디자인 #기프티콘마켓

‘기기’는 기프티콘을 기부받아, 이를 온라인 플랫폼에서 판매하고 발생한 수익금을 사회복지단체에 기부하는 착한 소비 연계형 기부 플랫폼입니다. 홈페이지 제작 시 기기의 고유 캐릭터와 상징색인 초록색을 중심으로 귀엽고 아기자기한 UI/UX를 설계 하여 사용자 친화적인 분위기를 조성하였습니다. 기기는 따뜻한 기부 문화 확산을 위한 기능성과 직관적인 사용자 경험, 그리고 브랜딩 요소가 유기적으로 결합된 웹사이트로 완성했습니다.

  • 기기 이미지
  • 기기 이미지
  • 기기 이미지

기프티콘으로 기부하는
플랫폼 기기를 소개합니다.

기기 화면 페이지
기기

Project Objectives

직관적인 사용자 경험, 그리고 브랜딩 요소가
결합된 완성도 있는 웹사이트 제작

  • Visual Identity Alignment

    브랜드 아이덴티티의 시각적 반영

    누구나 쉽게 사용할 수 있도록 기부와 구매 흐름을
    단순화하고,직관적인 구조와 UI로 상호작용의 장벽을
    낮췄습니다.

  • Ease of Use

    상호작용 편의성

    브랜드의 철학과 감성을 시각적으로 일관되게 전달하기
    위해 캐릭터와 색상, 레이아웃 등 전반에 걸쳐
    아이덴티티를 반영한 디자인을 구현했습니다.

  • Openness in Communication

    정보전달의 투명성

    기부율, 사용 상태, 진행 현황 등을 명확하게 시각화하여 신뢰 할 수 있는 정보 전달 구조를 설계했습니다.

Advantages

기기 User

직관적인 UI 구성과 명확한 네비게이션 덕분에,
신규 방문자가 가입부터 기프티콘 검색, 구매, 기부,
마이페이지 관리까지 모든 단계를 자연스럽게
이해하고 진행할 수 있습니다.

기기 Client

별도 앱 개발 없이도 모바일 사용자들을
끌어들일 수 있어 초기 런칭 비용을 절감합니다.
기프티콘 관리 및 기부 진행 현황 파악이 용이합니다.

기기 Social Value

사용자들은 쉽고 빠른 절차를 통해 작은 금액으로도
손쉽게 기부에 참여할 수 있으며, 투명한 정보 제공으로
기부 과정에 대한 신뢰가 높아집니다.

Character Design

  • 차렷 차렷
  • GiGi GiGi
  • 안녕 안녕
  • 브이 브이
  • 점프 점프

Logo Design

This is a symbol-type logo designed using both line and flat graphics of the character.
The logo combines a bouncy and cute style wordmark with the symbol.

기기 로고 이미지
기기 로고 이미지
기기 로고 이미지
기기 로고 이미지

H-omepage Design

Intuitive Navigation

직관적 네비게이션 구조

첫 화면에서 ‘기프티콘 서치바(Search Bar)’를 배치하여 사용자가 원하는 기프티콘을 색할 수 있도록 했습니다. 메인 화면에 서비스의 모든 주요 기능(전체 메뉴)을 드러내어, 사용자가 별도 추가 클릭 없이도 원하는 기능으로 바로 이동할 수 있게 니다.

기기
화면
Responsive Design

반응형 디자인의 적용

별도의 앱 설치 없이도 모바일 브라우저에서 기프티콘을 구매·사용·기부할 수 있도록 최적화하여 접근성을 극대화했습니다.
PC, 태블릿, 스마트폰 등 어떤 기기에서도 동일한 품질의 사용자 경험을 제공하기 위해 반응형 웹으로 구축했습니다.

이미지
기기 화면
Combination of Character & Color

캐릭터와 컬러 조합으로 만든 친근한 감성

고객사의 캐릭터 로고와 직관적인 아이콘, 메인 컬러를 적극 활용하여 ‘귀엽고 아기자기한’ 분위기를 구현했습니다. 전체 화면 구성에서 여백과 컬러 대비를 신경 써서 ‘편안하면서도 친근한 느낌’을 동시에 주어 사용자가 첫 방문 시에도 긍정적 인상을 받을 수 있도록 설계하였습니다.

기기 캐릭터
Ease of Use

상호작용 편의성

회원가입 및 로그인
JOIN & LOGIN

간편한 회원가입 및 로그인 절차

간편 로그인(카카오, 네이버 등)으로 빠르게 회원 가입 및 다.

회원가입 화면
로그인 화면
기프티콘 구매하기
PURCHASE

구매하기 절차

기부된 기프티콘을 원하는 카테고리에서 손쉽게 검색하고 구매할 수 있습니다.

  • STEP 01 기프티콘 구매하기 화면
  • STEP 02 기프티콘 구매하기 화면
  • STEP 03 기프티콘 구매하기 화면
기프티콘 기부하기
DONATE

기부하기 절차

직접 기부가 어렵다면, 보유하고 계신 기프티콘의 이미지를 첨부하여 기부가능하며, 기부된 기프티콘은 사회복지단체에 기부됩니다.

기부 화면
후원 화면
마이페이지
MY PAGE

마이페이지

기프티콘 구매 및 기부 후 마이페이지에서 내역을 확인 할 수 있습니다. 기프티콘의 사용 상태, 기부 상태를 한눈에 확인할 수 있습니다.

기부 화면
후원 화면
프로젝트

COLOR

The background uses a pale green color, with lime green from the logo as an accent,
and light orange is also used as a point color.

  • 색 Tea Green
    #D7E8B9
  • 색 Limerick
    #9DC814
  • 색 Dark Green
    #003916
  • 색 Big Foot Feet
    #F18F60

FONT

SUITE is designed for UI environments, providing excellent readability and
a consistent visual experience across buttons, icons, and body text in various
digital contexts.

  • SUITE

    Aa

    Extra Bold

  • SUITE

    Aa

    Bold

  • SUITE

    Aa

    Medium

  • SUITE

    Aa

    Regular

ⓒ 2025 BRANDIOWEB. ALL RIGHTS RESERVED.