[식품/음료] 칠성사이다 70주년 홈페이지 분석

 

 

칠성사이다 70주년

 

[ 인트로 ]

​

여러분은 탄산음료를 좋아하시나요??

좋아하신다면 어떤 음료를 가장 즐기시나요~??

​

콜라, 환타, 웰치스, 탄산수 등 다양한 종류의 탄산음료가 있지만

저는 사이다를 제일 좋아합니다! 그중 칠성 사이다를 가장 좋아하구요.

적당히 달면서 톡 쏘는 맛이 정말 좋지 않나요??

​

1950년 5월 9일 출시되어

2020년 칠성 사이다가 70주년을 맞이했다고 합니다!

70주년을 기념하는 의미에서 칠성 사이다에서 기념 이벤트 페이지를 제작했는데요!

​

저는 오늘 이 이벤트 페이지를 분석해보려고 합니다!

​

70년의 칠성 사이다의 역사가 담긴 공간

한 번 살펴보도록 할까요??

 

---

[ 메인 페이지 ]

칠성사이다 이벤트 페이지의 메인 화면입니다!

일러스트로 제작되어 접속을 하면 그림 하나하나가 내려옵니다.

전체적인 컨셉이 하나의 테마파크를 연상시키죠??

한 음료의 역사를 이렇게 한 공간 안에서 체험하는 듯한 느낌을 고려하여 디자인한 것 같습니다.

​

1 NAV BAR

이 홈페이지는 이벤트 페이지이기 때문에 서브 페이지가 없습니다!

원페이지의 퀵 스크롤 형태로 되어 있는데요.

상단에 내비게이션 바 역시 메뉴가 아니라 퀵 스크롤 되는 버튼입니다.

​

2 QUICK SCROLL

왼쪽에도 스크롤을 두었네요.

저는 차라리 둘 중 하나만을 선택해서 넣었다면 어땠을까 생각해 봤습니다.

상단의 바와 왼쪽의 스크롤이 계속해서 같이 따라다녀서

콘텐츠를 계속해서 가리기 때문에 아쉬움이 남았습니다.

​

3 ROLLING

70의 0이 계속해서 회전합니다.

개발자 도구로 살펴보니 background-position을 움직여 효과를 줬더라구요!

간단하게 동적인 느낌을 주기에 좋은 방법인 것 같습니다 😀

​

4 HOVER IMAGE

각 +버튼을 호버하면 4 번과 같이 해당 영역만 제외하고 흑백으로 변합니다.

정말 많은 부분을 고려해서 만들었다는 생각이 듭니다.

심지어 각 영역 또한 퀵 스크롤로 연결되어 있습니다!

 

---

서브 페이지는 따로 없으니 콘텐츠라고 명명을 해보겠습니다 😄

칠성 사이다에서 메인 페이지를 제외한 콘텐츠 영역은 총 8가지인데요.

이 중 인상적이었던 4가지 정도만 살펴볼까 합니다!

---

[ 70년 히스토리 ]

1 TAB

그림책 형태로 짜여진 70년 히스토리 콘텐츠는 탭 메뉴를 눌러

1950년대부터 1990년대의 추억 속 칠성 사이다를 볼 수 있습니다.

책 표지에는 각 연대별로 달라지는 사이다 병의 모습도 확인할 수 있습니다!

​

일러스트와 손글씨 폰트가 그림책 컨셉과 너무 잘 어울리는 것 같아요!

클릭을 하지 않고 몇 초간 머물러도 저절로 다음 장으로 넘어갑니다.

​

2 SLIDE BUTTON

각 탭이 5개고 각 4장으로 이루어져 총 20장의 화면을 보여줍니다.

슬라이드 버튼을 이용해서도 넘겨볼 수 있습니다!

​

저는 1970년대 이야기 중 기차에서 계란과 함께 먹는 칠성 사이다가 특히 공감이 많이 됐습니다 😊

 

---

[ 리그린 버스정류장 ]

 

미세먼지를 비롯한 각종 대기오염 물질로부터 노출되는 삭막한 도심 속 버스정류장을
식물 녹화로 자연 친화적인 청량한 버스정류장으로 탈바꿈시켜, 맑고 깨끗한 녹색쉼터로 조성했습니다.
누구에게나 초록 휴식이 되는 버스정류장. 칠성 사이다가 서울시와 함께 만듭니다.
 - 리그린 이벤트 中 -

 

+ HOVER

​메인 페이지에서 많이 보던 인터렉션이죠??

+버튼을 호버하면 그에 대한 자세한 내용과 실제 사진이 말풍선 안에 나타납니다.

​

메인과 플러스 버튼과 말풍선 디자인이 같은데요.

앞에서 이미 경험한 ui로 사용자가 사용하는 데에 혼란을 겪지 않도록 배려해 설계한 것 같네요!

​

저는 다양하고 화려한 효과도 중요하지만 사용자가 사용할 때

'어떤 버튼을 눌러야 뭐가 나오는 거지?'하는 생각을 안 하도록

직관적이고 어느 정도의 통일감을 주는 디자인 역시 중요하다고 생각합니다!

 

---

[ 광고 카피 공모전 당선작 ]

칠성 사이다에서 광고 카피 공모전도 진행을 했는데요!

버스정류장 광고 카피에 쓰이게 된 공모전 당선작들을 보여주는 공간입니다.

​

+버튼을 클릭하면 아래 모달창이 나오는데 혹시나 놓칠 사용자를 위해

지도의 버스정류장 버튼을 클릭하시면, 광고 카피 당선작을 보실 수 있습니다.

라는 안내 문구를 넣어 주었네요!

​

모달창을 보시면 어느 정류장에 어떤 이미지와 카피가 실리고

해당 카피를 작성한 사람의 닉네임 정보를 제공하고 있습니다.

​

다만 아쉬웠던 점은 총 몇 개의 카피가 있고

내가 지금 보고 있는 카피는 몇 번째에 해당하는지에 대한 인디케이터가 없습니다!

​

현재 제가 캡쳐해 온 사진은 9개의 사진 중 두 번째 사진이었는데요.

2/9 등의 텍스트가 있었다면 9개의 사진을 다 봤을 때 '제공되는 이미지를 다 봤구나'라는 생각을 할 수 있지 않을까요??

​

아래 사진처럼 말이죠!

---

 

[ 추억 감정소 ]

우와 이 사진들 좀 보세요!

70년의 역사를 자랑하는 만큼 정말 오래된 사진들이 많네요!

액자 형태로 나와 있고 클릭하면 큰 이미지의 모달창이 나옵니다.

​

전 국민에게 사이다와 함께 찍힌 사진을 받고 투표를 통해 선정된 사진들이라고 하네요.

여러분들은 칠성 사이다와 함께 한 추억이 있나요??

​

---

[ 마무리 ]

1960년대 칠성사이다 포스터 (출처: 칠성사이다 70주년 홈페이지)

달콤 톡톡 칠성 사이다!

느끼한 음식을 먹거나 퍽퍽한 음식을 먹을 때 탄산음료만 한 것이 없죠!

오늘은 70주년을 맞아 제작한 칠성 사이다의 이벤트 페이지를 살펴보았는데요.

​

전반적으로 아기자기한 일러스트와 손글씨 폰트, 통일감 있는 인터렉션 효과가 인상적이었습니다!

간간이 일러스트들이 움직이기도 하고 칠성 사이다의 옛 병의 모습이나

관련 동영상이 삽입되어 있어 지루할 틈이 없는 홈페이지였습니다!

​

한 번 방문해서 칠성사이다 역사를 살펴보는 것은 어떨까요 😁