프로젝트 상담 신청 프로젝트 소개로 건너뛰기
흰 종이 위에서 손끝으로 기울인 레드 와인잔. 가운데는 짙은 루비이고, 와인이 얇아지는 위쪽 가장자리는 보랏빛입니다.

EASYWINE · CASE STUDY이지와인 홈페이지 리뉴얼 제안은
흰 종이 위에서 와인잔을 기울이는 일로 시작했습니다

TILT TEST잔을 기울이면 가운데는 루비,
와인이 얇아지는 가장자리는 보라로 보입니다

20 SAMPLES가운데에서 가장자리까지
스무 점의 색을 뽑았습니다

TWO DIRECTIONS두 시안은 이 띠의 양 끝에서
각자의 색을 골랐습니다

EASYWINEWEBSITE RENEWAL PROPOSAL

가운데의 루비,가장자리의 보라

이지와인 홈페이지 리뉴얼 제안
Ruby in Motion · Easy Pour, 두 가지 방향

BLUECANVASA · BPRODUCT OF SEOUL

케이스 읽기
01 / OVERVIEW프로젝트 개요

세계의 와인을
쉽게 고르게 돕는 수입사

이지와인은 2012년에 출범한 와인 수입사입니다. 칠레, 미국, 프랑스, 이탈리아, 스페인의 일곱 브랜드에서 고른 와인 25종을 국내에 소개하고, 명절과 기념일에 맞춘 선물세트도 꾸립니다. 회사 소개에 적힌 경영 방침은 「양질의 와인을 합리적인 가격으로 제공한다」입니다.

지금 홈페이지는 2015년과 2016년에 올린 자료로 이루어져 있습니다. 블루캔버스는 이 자료를 다시 읽고, 와인을 처음 고르는 사람도 회사의 이야기와 브랜드, 와인을 쉽게 찾아볼 수 있도록 메인 페이지를 새로 설계했습니다. 그리고 Ruby in Motion과 Easy Pour라는 두 가지 방향을 제안했습니다.

CLIENT
이지와인(주)
2012년 출범한 와인 수입사
SECTOR
와인 수입 · 유통
선물세트
OUR ROLE
리서치, 브랜드 해석, 정보 구조,
UI 디자인, 모션그래픽, 스크롤 필름
DELIVERABLE
메인 시안 2종, 모바일 화면,
스크롤 필름, 컬러 · 서체 가이드
  • 2012출범세계 산지의 와인을 들여와 소개하기 시작한 해
  • 5개국와인 산지칠레, 미국, 프랑스, 이탈리아, 스페인
  • 7개와인 브랜드발디비에소에서 핑크 엘리펀트까지
  • 25종소개하는 와인레드 16종, 화이트 6종, 스파클링 · 로제 3종
02 / CHALLENGE출발점

지금 홈페이지의 첫 화면 구성
  1. 1메뉴는 회사, 브랜드, 선물세트, 와인, 보도, 갤러리 여섯 개입니다.
  2. 2첫 화면에는 와인 열두 병의 사진이 바둑판처럼 놓입니다. 병을 누르면 제품 설명으로 갑니다.
  3. 3회사 소개와 일곱 브랜드의 소개는 글자가 들어간 그림 한 장씩입니다.

TEXT IN A PICTURE

그림 속 글자는
확대하면 흐려집니다

회사 소개 첫 줄을 지금처럼 가로 650px 그림에 넣은 글자와, 웹 글자로 쓴 글자를 나란히 두었습니다. 막대를 오른쪽으로 끌어 확대해 보세요.

지금 · 그림 속 글자검색 ✕ · 번역 ✕ · 화면 읽기 ✕
경험은 ‘양’이 아니라 ‘질’입니다.
제안 · 웹 글자검색 ○ · 번역 ○ · 화면 읽기 ○

FOUR QUESTIONS

리뉴얼은
네 가지 질문에서 시작했습니다

지금 홈페이지는 와인 사진을 빠르게 보여 주는 구조입니다. 처음 오는 사람이 무엇을 기준으로 골라야 할지, 회사가 어떤 곳인지는 그림 속 글자를 읽어야 알 수 있습니다.

  1. Q1
    와인을 잘 모르는 사람도 첫 화면에서 고를 수 있을까요?

    지금은 병 사진과 이름만 보입니다. 두 시안은 레드 · 화이트 · 스파클링 같은 쉬운 기준과 음식, 산지로 와인을 찾게 했습니다.

  2. Q2
    그림 속에 갇힌 회사 이야기를 글로 꺼낼 수 있을까요?

    회사 소개와 브랜드 소개를 모두 글로 다시 써서, 검색되고 번역되며 휴대폰에서도 또렷하게 읽히게 했습니다.

  3. Q3
    일곱 브랜드와 다섯 나라를 한눈에 보여 줄 수 있을까요?

    두 시안 모두 지구본 위에 산지를 표시하고, 나라를 고르면 그 나라의 브랜드와 이야기가 나오게 했습니다.

  4. Q4
    선물이나 납품을 찾는 사람은 어디로 가야 할까요?

    B안은 선물세트와 업장 납품, 행사 협찬을 따로 안내했고, A안은 선물 상담을 문의 창과 바로 이었습니다.

03 / BRAND로고 다시 읽기

로고가 보라인
와인 회사

새 상징을 만들기 전에 지금의 이름과 로고, 회사 소개에 적힌 문장을 다시 읽었습니다. 와인 회사의 로고라면 붉은색일 것 같지만, 이지와인의 로고는 처음부터 보라였습니다. 그 보라가 어디에서 왔는지 따라가 보았습니다.

01 · EASY + WINE

이름이 곧 약속입니다

EASY WINE이라는 이름에는 와인을 쉽게 만들겠다는 약속이 들어 있습니다. 회사 소개에는 「양질의 와인을 합리적인 가격으로 제공한다」는 경영 방침도 적혀 있습니다. 두 시안은 이 약속을 첫 화면의 문장으로 옮기는 데서 시작했습니다.

02 · THREE VIOLETS

로고의 세 가지 보라

로고의 E 뒤에는 반투명한 도형 세 개가 겹쳐 있습니다. 색을 뽑아 보면 라벤더, 난초색, 자주입니다. 와인 회사의 로고인데 붉은색이 한 점도 없다는 점이 이번 리뉴얼의 첫 질문이 되었습니다.

03 · RIM

잔의 가장자리에서 찾은 보라

어린 레드 와인을 흰 종이 위에서 기울이면, 와인이 얇아지는 가장자리부터 보랏빛이 돕니다. 해가 갈수록 이 빛은 루비에서 석류색과 벽돌색으로 바뀝니다. 우리는 이지와인 로고의 보라를 이 가장자리의 색으로 읽었습니다.

04 · QUALITY

‘양’이 아니라 ‘질’

2015년에 쓴 회사 소개는 「경험은 ‘양’이 아니라 ‘질’입니다」라는 문장으로 시작합니다. 원고에서 ‘양’은 금색, ‘질’은 붉은색으로 칠해져 있었습니다. 많이 늘어놓기보다 잘 골라 보여 주는 홈페이지가 이 문장에 맞는다고 보았습니다.

05 · TWO OPENINGS

두 시안의 첫 문장

A안 Ruby in Motion은 「A little wine, a lot of life.」로, B안 Easy Pour는 「Easy to Understand · Approach · Drink」로 첫 화면을 엽니다. 한쪽은 잔의 가운데에서, 다른 한쪽은 잔의 가장자리에서 출발한 시안입니다.

04 / WORDS라벨의 낯선 단어

라벨의 낯선 단어를
식탁의 말로

와인을 어렵게 만드는 것은 맛보다 이름입니다. 이지와인의 와인 25종의 이름에는 Single Vineyard, Riserva처럼 라벨에서 그대로 옮긴 단어가 많습니다. 리뉴얼을 준비하며 이런 단어를 한 문장의 우리말로 풀어 보았습니다. 제품 상세 화면에 함께 붙일 수 있는 작은 사전입니다.

  1. Single Vineyard

    싱글 빈야드

    한 포도밭에서 난 포도로만

    여러 밭의 포도를 섞지 않고, 포도밭 한 곳에서 난 포도로만 만들었다는 뜻입니다. 그 밭의 흙과 햇빛이 맛에 그대로 남습니다.

    발디비에소 싱글빈야드 카베르네프랑 병
    발디비에소 싱글빈야드 카베르네프랑
  2. Riserva

    리제르바

    기본 와인보다 오래 숙성한

    같은 이름의 기본 와인보다 오래 숙성했다는 뜻입니다. 이탈리아는 산지마다 리제르바가 지켜야 할 최소 숙성 기간을 정해 둡니다.

    베끼아토레 살리스살렌티노 리제르바 병
    베끼아토레 살리스살렌티노 리제르바
  3. Solera

    솔레라

    앞서 만든 와인에 새 와인을 더해 가며

    새로 만든 와인을 앞서 만든 와인에 조금씩 더해 가며, 여러 해의 맛을 한 병에 이어 가는 숙성 방식입니다.

    카발로 로코 병
    카발로 로코
  4. Crémant · Brut

    크레망 · 브뤼

    샴페인처럼 만든 달지 않은 스파클링

    크레망은 샹파뉴 밖의 프랑스 산지에서 샴페인과 같은 방식으로, 병 속에서 한 번 더 발효해 거품을 낸 스파클링입니다. 브뤼는 달지 않다는 뜻입니다.

    그랑꾸베 1531 병
    그랑꾸베 1531
  5. Old Vine

    올드 바인

    오래된 포도나무에서 딴

    수십 년 넘게 자란 포도나무를 말합니다. 열매는 적게 맺지만 한 알 한 알의 맛이 진해집니다.

    발타사르 가르나챠 히어로 병
    발타사르 가르나챠 히어로
  6. Moscato

    모스카토

    향이 화사한 청포도

    꽃과 과일 향이 화사한 청포도 품종입니다. 달콤하고 가벼운 스파클링 와인을 만들 때 많이 씁니다.

    발디비에소 스파클링 모스카토 병
    발디비에소 스파클링 모스카토
  7. Zinfandel

    진판델

    캘리포니아를 대표하는 적포도

    캘리포니아를 대표하는 적포도 품종입니다. 이탈리아 남부에서 프리미티보라고 부르는 포도와 같은 품종입니다.

    캘러웨이 진판델 병
    캘러웨이 진판델
05 / CELLAR25병을 나누는 기준

스물다섯 병을
네 가지로 나눠 보면

지금 홈페이지는 와인을 브랜드 하나의 기준으로만 나눕니다. 브랜드 이름을 아는 사람에게는 빠른 길이지만, 처음 오는 사람에게는 또 하나의 낯선 단어입니다. 이지와인의 25종을 브랜드, 종류, 산지, 음식이라는 네 가지 기준으로 다시 세워 보았습니다.

지금 홈페이지의 「WINE」 메뉴는 브랜드 일곱 곳으로 와인을 나눕니다. 발디비에소 한 곳에 열한 병이 몰려 있습니다.

  • 카발로 로코카발로 로코
  • 발디비에소 싱글빈야드 카베르네프랑발디비에소 싱글빈야드 카베르네프랑
  • 발디비에소 싱글빈야드 메를로발디비에소 싱글빈야드 메를로
  • 발디비에소 싱글빈야드 카베르네소비뇽발디비에소 싱글빈야드 카베르네소비뇽
  • 발디비에소 그랑리제르바 카베르네소비뇽발디비에소 그랑리제르바 카베르네소비뇽
  • 발디비에소 그랑리제르바 시라발디비에소 그랑리제르바 시라
  • 발디비에소 그랑리제르바 샤도네이발디비에소 그랑리제르바 샤도네이
  • 발디비에소 카베르네소비뇽발디비에소 카베르네소비뇽
  • 발디비에소 메를로발디비에소 메를로
  • 발디비에소 샤도네이발디비에소 샤도네이
  • 발디비에소 스파클링 모스카토발디비에소 스파클링 모스카토
  • 캘러웨이 진판델캘러웨이 진판델
  • 캘러웨이 카베르네소비뇽캘러웨이 카베르네소비뇽
  • 캘러웨이 메를로캘러웨이 메를로
  • 캘러웨이 샤도네이캘러웨이 샤도네이
  • 캘러웨이 소비뇽블랑캘러웨이 소비뇽블랑
  • 베끼아토레 살리스살렌티노 리제르바베끼아토레 살리스살렌티노 리제르바
  • 베끼아토레 살리스살렌티노 로소베끼아토레 살리스살렌티노 로소
  • 베끼아토레 샤도네이베끼아토레 샤도네이
  • 미션서드 카베르네시라미션서드 카베르네시라
  • 미션서드 샤도네이미션서드 샤도네이
  • 발타사르 가르나챠 히어로발타사르 가르나챠 히어로
  • 발타사르 가르나챠발타사르 가르나챠
  • 그랑꾸베 1531그랑꾸베 1531
  • 핑크 엘리펀트 스파클링 로제핑크 엘리펀트 스파클링 로제
06 / STRUCTURE방문자와 장면 순서

이지와인 홈페이지를 여는
다섯 부류의 사람들

와인 수입사의 홈페이지에는 오늘 마실 와인을 고르는 사람과 선물을 찾는 사람, 업장에 들일 와인을 찾는 구매 담당자가 함께 찾아옵니다. 찾는 정보가 저마다 달라서, 각자가 도착할 장면을 먼저 정했습니다.

  • 01오늘 마실 와인을 고르는 사람

    종류와 맛, 어울리는 음식을 보고 한 병을 고릅니다.

    와인 · 페어링
  • 02선물을 고르는 사람

    명절과 기념일에 맞는 1본입 · 2본입 구성을 찾습니다.

    선물세트
  • 03호텔 · 레스토랑 구매 담당자

    업장의 메뉴와 가격대에 맞는 와인과 공급 방법을 확인합니다.

    브랜드 · 납품 문의
  • 04매장 · 유통 바이어

    브랜드의 이야기와 제품 정보를 확인하고 입점을 상담합니다.

    브랜드 · 와인 상세
  • 05기업 선물 · 행사 담당자

    수량과 예산에 맞춘 선물과 행사용 와인을 문의합니다.

    기업 선물 · 문의

짧게 맛보는 일곱 장면,
길게 고르는 열두 장면

두 시안 모두 첫 장면에서 이지와인을 한 문장으로 소개하고, 와인과 산지, 선물을 지나 문의에 닿습니다. A안은 일곱 장면으로 분위기를 빠르게 전하고, B안은 회사의 이력과 셀러, 페어링, 납품 안내에 장면을 하나씩 따로 주어 열두 장면으로 길게 고르게 했습니다. 색 점은 각 장면이 맡은 일입니다.

  • 첫 화면
  • 회사 이야기
  • 와인 고르기
  • 산지 · 브랜드
  • 선물
  • 납품 · 협력
  • 순간 · 보도
  • 문의

A · Ruby in Motion7장면

  1. 01A little wine, a lot of life.잔을 감싸는 루비빛 영상과 첫 문장
  2. 02Our philosophy한 잔에 담긴 더 넓은 세상, 2012 · 5 · 7
  3. 03The collection여섯 병을 가로로 넘기고 종류로 거르는 컬렉션
  4. 04Rooted in the world지구본과 다섯 나라의 산지
  5. 05Wine & life촛불 아래 두 잔이 놓인 저녁 식탁
  6. 06Gifting선물 상자와 선물 상담
  7. 07Let’s talk wine전화 · 메일 · 지도와 문의 창

B · Easy Pour12장면

  1. 01Easy to …스크롤로 잔에 와인이 차오르는 첫 화면
  2. 02Manifesto경험은 ‘양’이 아니라 ‘질’입니다
  3. 03Record2012년부터 쌓아 온 이력과 숫자
  4. 04Journey지구본 위 다섯 나라와 일곱 브랜드
  5. 05Brands일곱 브랜드의 로고
  6. 06Cellar셀러에서 꺼낸 여덟 병
  7. 07Lineup25종 목록과 종류 필터
  8. 08Pairing음식을 고르면 어울리는 와인
  9. 09Gift1본입 · 2본입 · 골프 세트 · 기업 선물
  10. 10Partners호텔 · 레스토랑, 유통, 행사
  11. 11Moments함께한 순간과 보도
  12. 12Contact납품과 선물 문의
07 / COLOR컬러 차트

잔의 가운데와
가장자리 사이

첫 화면의 사진에서 잔의 가운데부터 가장자리까지 같은 간격으로 스무 점의 색을 뽑았습니다. 와인이 깊은 가운데는 검정에 가까운 루비이고, 얇아질수록 붉은 띠를 지나 보라로 옅어집니다. A안은 이 띠의 가운데 쪽에서, B안은 가장자리 쪽에서 화면의 색을 골랐습니다.

이지와인 로고 심벌: E 글자 뒤로 라벤더, 난초색, 자주색의 반투명 도형 세 개가 겹쳐 있습니다.
  • E 뒤의 큰 도형
  • 오른쪽 도형
  • EASY WINE이 적힌 아래 도형
지금 로고의 세 가지 보라B안은 로고를 그대로 쓰고, 라벤더를 조금 밝힌 #BBA4F5를 버튼과 강조색으로 썼습니다. A안은 시안의 로고 자리에 글자 워드마크 EASYWINE을 두고, 보라 대신 잔 가운데의 루비를 브랜드 색으로 삼았습니다.

루비의 재료와
보라의 재료

A안은 오후 햇빛이 드는 크림색 식탁을 떠올렸습니다. 옥스블러드 벨벳과 루비색 와인, 트래버틴, 체리와 코르크를 올렸습니다.

B안은 촛불 하나만 켠 저녁 식탁을 떠올렸습니다. 가지색 리넨 위에 포도와 라벤더 실크, 자수정색 유리, 보랏빛 와인 자국이 남은 종이를 놓았습니다. 가운데 선을 좌우로 끌면 두 재료를 견주어 볼 수 있습니다.

A안 Ruby in Motion 의 재료 보드: 크림색 종이 위의 옥스블러드 벨벳, 루비색 와인 잔, 트래버틴, 체리, 코르크, 버건디 리본, 마른 장미
B안 Easy Pour 의 재료 보드: 가지색 리넨 위의 포도, 라벤더 실크, 자수정색 유리, 보랏빛 와인 자국이 남은 종이, 라벤더 꽃대

A · Ruby in Motion

잔의 가운데
  • 어두운 장면의 바탕 · 24%첫 화면과 산지 장면의 바탕입니다. 검정 대신 병 속처럼 붉은 기가 도는 어둠을 썼습니다.

  • 밝은 장면의 글자 · 어두운 면 · 17%크림색 장면 위에 쓰는 글자색이자 어두운 장면의 두 번째 면입니다. 잔 가운데의 가장 짙은 색에 가깝습니다.

  • 강조 · 1% 미만이탤릭 영문과 필터 버튼, 진행 막대의 색입니다. 화면의 1%도 되지 않지만 눈은 먼저 이 색으로 갑니다.

  • 빛 · 1% 미만잔을 감싸는 와인의 밝은 부분과 같은 색입니다.

  • 마지막 장면 · 15%문의 장면 「Shall we open a bottle?」의 바탕입니다.

  • 밝은 장면의 바탕 · 43%이야기와 컬렉션, 선물 장면의 바탕입니다. 흰 식탁보의 색을 떠올렸습니다.

B · Easy Pour

잔의 가장자리
  • 가장 깊은 바탕 · 12%첫 화면과 문의 장면처럼 가장 어두워야 하는 곳의 색입니다. 보랏빛이 도는 밤입니다.

  • 장면 바탕 · 42%대부분의 장면이 이 색 위에 놓입니다. 첫 화면의 필름이 페이지 전체로 이어지도록 Night보다 한 단계만 밝혔습니다.

  • 카드 · 면 · 30%카드와 입력창, 메뉴의 바탕입니다.

  • 와인 · 13%셀러 장면의 바닥과 푸터 글자에 차오르는 와인의 색입니다.

  • 강조 · 1% 미만버튼과 강조 글자의 색입니다. 로고의 라벤더를 조금 밝혀 어두운 바탕에서 읽히게 했습니다.

  • 글자 · 1% 미만본문 글자의 색입니다. 흰색에 보라를 한 방울 섞었습니다.

색 견본을 누르면 HEX 값이 복사됩니다. 견본 안의 숫자는 그 위에 올리는 글자색과의 명도 대비이고, 비율은 두 시안의 장면 캡처에서 각 색에 가까운 화소를 세어 낸 값입니다.

08 / TYPOGRAPHY서체

두 시안이 고른
같은 세리프

두 시안은 따로 만들었지만 모두 영문 제목에 Cormorant 계열을 골랐습니다. 와인 라벨에 흔히 쓰이는 고전적인 세리프의 결을 화면으로 옮긴 선택입니다.

A안은 Cormorant의 가는 획과 이탤릭을 크게 키워 한 문장을 포스터처럼 보여 주고, 한글은 모두 Pretendard로 썼습니다. B안은 한글 제목에 Noto Serif KR을 써서 영문과 한글이 같은 세리프의 결로 읽히게 했습니다.

Cormorant 400 · A안 첫 화면A little wine,

A little wine,
a lot of life.

셀러에서 꺼낸
여덟 병

Noto Serif KR 600 · B안 셀러 장면한글 제목
Pretendard · A안 한글500 / 1.65

와인을 어렵지 않게,
일상을 조금 더 특별하게.

Find your kind of wine.

Noto Serif KR · B안 선언문600

경험은 ‘양’이 아니라
‘질’입니다.

오늘 메뉴에 맞는 와인 찾기

Cormorant Garamond · B안 와인 이름Italic 400

Callaway Zinfandel

색
진한 레드
향
블랙베리, 블랙체리, 은은한 초콜릿
맛
섬세한 탄닌과 이국적인 풍미
09 / MOTION모션 원칙

따르고, 멈추고,
천천히 넘기는 움직임

A안의 움직임은 잔 속 와인이 천천히 도는 속도를, B안의 움직임은 병에서 와인을 따르는 속도를 따릅니다. 둘 다 스크롤이 움직임을 이끌고, 운영체제에서 모션을 줄이면 영상과 고정 장면을 멈추고 마지막 화면만 보여 줍니다. 아래 네 장의 카드는 스크롤을 따라 실제로 움직입니다.

A안 첫 화면 영상의 프레임: 루비빛 와인이 크리스털 잔을 감싸며 흐릅니다
01 · SCROLL TO UNCORK · A

멈췄다가 되감기는 영상

A안 첫 화면의 6초 영상은 스스로 재생되다가, 스크롤을 시작하면 멈추고 스크롤 방향으로 앞뒤로 움직입니다. 이 카드를 지나가는 동안 그 영상의 프레임 48장이 같은 방식으로 넘어갑니다.

B안 첫 화면의 프레임: 병에서 잔으로 레드 와인을 따르는 장면
02 · POUR · B

스크롤로 따르는 와인

B안 첫 화면은 병에서 잔으로 와인을 따르는 프레임 151장을 스크롤 위치에 맞춰 그립니다. 와인이 차오르는 동안 Understand, Approach, Drink가 차례로 바뀝니다. 이 카드에서는 그중 60장이 넘어갑니다.

03 · FILL THE WORD · B

글자에 차오르는 와인

B안의 마지막 장면에서는 EASY WINE 글자 안으로 와인이 물결치며 차오릅니다. 이 카드의 글자도 지나가는 동안 같은 방식으로 채워집니다.

04 · ONE BY ONE · A

한 병씩 넘기는 컬렉션

A안의 컬렉션은 세로 스크롤을 가로 이동으로 바꿔 여섯 병을 차례로 보여 줍니다. 카드마다 병 뒤에 가는 타원을 두었고, 레드 · 화이트 · 스파클링 버튼으로 바로 거를 수 있습니다.

제안 A안 · 잔의 가운데

Ruby in MotionA little wine, a lot of life.

와인잔을 감싸며 흐르는 루비빛 와인으로 시작하는 방향입니다. 첫 화면의 6초 영상은 스스로 재생되다가, 스크롤을 시작하면 멈추고 스크롤을 따라 앞뒤로 움직입니다. 어두운 루비 장면과 크림색 장면을 번갈아 두어, 병 속의 어둠과 흰 식탁보를 오가는 리듬을 만들었습니다.

  • 잔을 감싸는 루비빛 영상과 「A little wine, a lot of life.」
  • 레드 · 화이트 · 스파클링으로 거르는 가로 컬렉션과 와인 상세 창
  • 다섯 나라 가운데 하나를 고르면 돌아가는 지구본
  • 선물 상담과 문의를 메일 앱으로 바로 잇는 문의 창
Cormorant · Pretendard
DIRECTION NOTES

시안 A의 장면 가운데 연출에 공을 들인 순간을 골랐습니다. 사진을 누르면 장면별 화면을 크게 볼 수 있습니다.

  1. A little wine, a lot of life.

    루비빛 와인이 크리스털 잔을 감싸고, 왼쪽의 어둠에 첫 문장을 크게 적었습니다.

  2. Just one sip.

    스크롤을 내리면 영상이 멈추고, 첫 문장이 물러난 자리에 「Just one sip. A whole new world.」가 가운데로 떠오릅니다.

  3. 한 잔에 담긴 더 넓은 세상

    크림색 장면으로 넘어가며 2012, 5 countries, 7 brands를 숫자로 보여 줍니다.

  4. Find your kind of wine.

    와인 여섯 병을 가로로 넘기는 컬렉션입니다. 카드마다 나라와 종류를 적었습니다.

  5. 한 병씩 넘기는 카드

    세로 스크롤이 가로 이동으로 바뀌고, 아래 막대가 지금 몇 번째 병인지 알려 줍니다.

  6. From a place. With a story.

    다섯 나라를 고르는 목록 아래로 해 질 녘 포도밭이 넓게 펼쳐지고, 「한 병을 열면, 그 땅의 이야기도 함께 열립니다」가 놓입니다.

  7. Good wine. Better together.

    촛불 아래 두 잔이 놓인 저녁 식탁으로 와인이 있는 순간을 보여 줍니다.

  8. Some gifts say more.

    버건디 선물 상자 옆에 선물 상담과 기업 선물 상담을 나란히 두었습니다.

RUBY IN MOTION잔의 가운데를 비우고

EASY POUR가장자리의 보라를 따릅니다

제안 B안 · 잔의 가장자리

Easy PourEasy to Understand · Approach · Drink

병에서 잔으로 와인을 따르는 장면으로 시작하는 방향입니다. 스크롤을 내리는 만큼 와인이 잔에 차오르고, 그동안 Understand, Approach, Drink 세 단어가 차례로 바뀝니다. 로고의 라벤더를 강조색으로 쓰고, 회사 이야기와 브랜드, 와인, 선물, 납품 안내를 한 페이지에 차례로 담았습니다.

  • 스크롤로 와인을 따르는 첫 화면과 세 가지 Easy
  • 지구본 위에서 다섯 나라와 일곱 브랜드를 잇는 여정
  • 병이 바뀔 때마다 바닥의 와인 색이 바뀌는 셀러의 여덟 병
  • 음식을 고르면 어울리는 와인을 알려 주는 페어링
Cormorant Garamond · Noto Serif KR · Pretendard
DIRECTION NOTES

시안 B의 장면 가운데 연출에 공을 들인 순간을 골랐습니다. 사진을 누르면 장면별 화면을 크게 볼 수 있습니다.

  1. Easy to Understand

    어두운 바 위로 병이 기울고, 잔에 와인이 떨어지기 시작합니다. 첫 단어는 Understand입니다.

  2. Easy to Drink

    와인이 잔을 채우면 단어가 Drink로 바뀌고, 다음 장면으로 와인이 화면을 덮으며 넘어갑니다.

  3. 경험은 ‘양’이 아니라 ‘질’입니다

    지금 회사 소개의 첫 문장을 그대로 가져와 한 화면에 크게 세웠습니다.

  4. 다섯 나라의 포도밭에서

    지구본이 돌며 산지에서 서울까지 경로를 긋고, 오른쪽 카드에 브랜드 이야기를 띄웁니다.

  5. 셀러에서 꺼낸 여덟 병

    병이 바뀔 때마다 바닥의 와인 색과 뒤의 큰 글자가 함께 바뀝니다.

  6. 오늘 메뉴에 맞는 와인 찾기

    음식 여덟 가지 가운데 하나를 고르면 어울리는 병과 이유가 바로 바뀝니다.

  7. 마음을 전하기 쉬운 와인

    1본입과 2본입, 골프 와인 세트, 기업 맞춤 선물을 한 장면에 모았습니다.

  8. 함께 일하는 방법

    호텔 · 레스토랑, 유통, 행사 카드가 차례로 겹쳐 올라옵니다.

10 / PROCESS정지 장면에서 필름까지

한 장의 장면에서
스크롤 필름까지

A안 첫 화면의 영상은 루비빛 와인이 잔을 감싸는 정지 장면 한 장에서 출발했습니다. 브라우저의 WebGL로 카메라를 천천히 움직이고 와인의 굴절과 빛을 흐르게 한 프레임 144장을 계산한 뒤, 6초 영상으로 묶었습니다. 왼쪽은 처음 장면이고, 오른쪽은 그 장면이 움직이기 시작한 모습입니다.

움직이기 시작한 장면: 6초 영상 후반의 한 프레임
처음 장면: 루비빛 와인이 크리스털 잔을 감싸는 정지 이미지
  • A안 산지 장면 이미지
    산지해 질 녘 언덕을 따라 이어지는 포도밭. 「From a place. With a story.」 장면의 배경입니다.
  • A안 저녁 식탁 장면 이미지
    저녁 식탁촛불 아래 두 잔이 부딪히는 식탁. 얼굴 없이 손만 보이게 했습니다.
  • A안 선물 상자 장면 이미지
    선물 상자버건디 상자와 샴페인색 리본. 라벨이 보이지 않게 병을 눕혔습니다.

장면 스무 장과
필름 두 편

B안에는 음식 여덟 장과 산지 여섯 장, 선물과 업장 장면을 합쳐 스무 장의 장면 이미지가 들어갑니다. 첫 화면과 산지 여정에는 처음 장면을 먼저 그린 뒤 10초 영상으로 이어 만들었고, 화면 비율(16:9, 4:3, 9:16)마다 프레임을 따로 뽑아 스크롤에 맞춰 그렸습니다.

B안 첫 장면의 처음 그림: 어두운 바 위의 빈 와인잔과 기울어진 병
01처음 장면
02와인을 따르는 필름
03프레임 151장 × 화면 비율 3가지

8 DISHES · 8 BOTTLES

  • B안 페어링 장면: 스테이크스테이크카발로 로코
  • B안 페어링 장면: 굴 · 해산물굴 · 해산물그랑꾸베 1531
  • B안 페어링 장면: 연어회연어회발디비에소 샤도네이
  • B안 페어링 장면: 파스타 · 피자파스타 · 피자미션서드 카베르네시라
  • B안 페어링 장면: 치즈치즈캘러웨이 진판델
  • B안 페어링 장면: 바비큐 · 구이바비큐 · 구이발타사르 가르나챠 히어로
  • B안 페어링 장면: 과일 샐러드과일 샐러드핑크 엘리펀트 스파클링 로제
  • B안 페어링 장면: 케이크케이크발디비에소 스파클링 모스카토
B · Easy Pour · 16:9 · 산지 여정

포도밭 위로 카메라가 떠오르는 필름입니다. 시안에서는 이 필름을 스크롤에 맞춰 넘기며 지구본으로 이어지는 「다섯 나라의 포도밭에서」 장면을 엽니다.

A · Ruby in Motion · 16:9 · WebGL

정지 장면 한 장에 카메라 이동과 와인의 굴절, 흐르는 빛을 더한 영상입니다.

11 / MOBILE모바일

휴대폰에서도
한 병씩 천천히

선물할 와인과 매장 정보는 휴대폰으로 찾는 일이 많습니다. A안은 모바일에서 가로 컬렉션을 손가락으로 넘기는 목록과 화살표 버튼으로 바꿨습니다. B안은 첫 화면의 따르는 장면을 세로 화면 전용 프레임으로 따로 만들었습니다.

시안 A · 첫 화면 모바일 화면
A · 첫 화면
시안 B · 첫 화면 모바일 화면
B · 첫 화면
시안 A · 컬렉션 모바일 화면
A · 컬렉션
시안 B · 산지 여정 모바일 화면
B · 산지 여정
시안 A · 산지 모바일 화면
A · 산지
시안 B · 셀러 모바일 화면
B · 셀러
시안 A · 선물 모바일 화면
A · 선물
시안 B · 페어링 모바일 화면
B · 페어링
COMPARE두 방향은 어떻게 다를까요

같은 잔의
가운데와 가장자리

두 시안은 같은 와인 25종과 같은 회사 이야기를 담고 있지만, 첫 화면에서 먼저 건네는 말이 다릅니다. A안은 루비빛 영상과 짧은 동선으로 분위기를 빠르게 전하고, B안은 와인을 따르는 장면에서 시작해 셀러와 페어링, 납품 안내까지 고르는 길을 넓게 펼칩니다. 이지와인이 첫 화면에서 가장 먼저 전하고 싶은 장면에 따라 고를 수 있도록 차이를 정리했습니다.

구분A · Ruby in MotionB · Easy Pour
첫 화면루비빛 와인이 잔을 감싸는 6초 영상, 스크롤하면 멈추고 앞뒤로 움직임병에서 잔으로 와인을 따르는 프레임 151장, 스크롤로 차오름
색나이트 루비 · 크림 · 와인 레드 (잔의 가운데)보랏빛 밤 · 라벤더 · 와인 (잔의 가장자리)
서체Cormorant · PretendardCormorant Garamond · Noto Serif KR · Pretendard
로고 자리글자 워드마크 EASYWINE지금의 보라 로고
와인을 고르는 방법가로 컬렉션과 종류 필터, 와인 상세 창셀러의 여덟 병, 25종 목록과 필터, 음식별 페어링
산지지구본과 다섯 나라 목록지구본 위의 여정과 일곱 브랜드 로고
선물 · 납품선물 상담과 문의 창선물세트, 업장 · 유통 · 행사 안내, 문의 양식
무게를 둔 곳분위기와 짧은 동선정보의 양과 고르는 재미
12 / CREDITSBLUECANVAS · WORKS 2026

BACK LABEL · 한글 표시사항

가운데의 루비,
가장자리의 보라

이지와인 홈페이지 리뉴얼 제안 · Ruby in Motion · Easy Pour

제품명
이지와인 홈페이지 리뉴얼 제안
고객
이지와인(주) EASYWINE
유형
메인 시안 2종 · 모바일 화면 · 스크롤 필름
빈티지
2026년 10월
리서치
와인 25종 · 일곱 브랜드 · 다섯 나라, 2015~2016년 원고
브랜드 해석
보라 로고와 잔의 가장자리, ‘양’이 아니라 ‘질’
구조
방문자 다섯 부류, 25병을 나누는 네 가지 기준
A · Ruby in Motion
UI 디자인, 6초 WebGL 영상, 가로 컬렉션
B · Easy Pour
UI 디자인, 따르기 스크롤 필름, 셀러 · 페어링
서체
Cormorant · Cormorant Garamond · Noto Serif KR · Pretendard
권장 화면
PC · 태블릿 · 모바일
원산지 · 제작
대한민국 서울 · 블루캔버스
YOUR NEXT GLASS

어렵게 느껴지는 상품을
쉽게 고르게 하고 싶다면

낯선 이름과 많은 선택지를 어떤 순서로 보여 줄지부터
함께 정리하겠습니다.

    Contact

    막연한 아이디어도 괜찮습니다.
    프로젝트를 함께 정리해 보세요

    현재 상황과 목표를 남겨 주시면 가능한 작업 범위와 진행 방식, 예상 견적을 정리해 안내드립니다.

    질문 4개 · 약 2분

    작업 범위

    어떤 작업을 함께 하면 좋을까요?

    여러 개 선택할 수 있습니다. 아직 정하지 못했다면 ‘기타’를 눌러 주세요.

    예산

    생각하시는 예산 범위는 어느 정도인가요?

    범위만 알려주셔도 제안 구성에 큰 도움이 됩니다.

    프로젝트 설명

    어떤 상황인지 들려주세요.

    다듬어지지 않아도 괜찮습니다. 아래 항목을 누르면 작성 틀이 채워집니다.

    0

    RFP, 참고 문서 등을 최대 2개까지 업로드할 수 있습니다. 지원 형식: PDF, PPT, Word, Excel, JPG, PNG, ZIP

    연락처

    어디로 회신드릴까요?

    작업 범위 · 예산 · 프로젝트 설명 · 연락처를 채워 주세요.