브랜드 웹 디자인 하는 방법

Brand
de.blur
Date
25.01.25
Keyword
웹디자인, 초록우산
Writer
Marketer _ Jua
브랜드 아이덴티티를 담은 웹 디자인 제작하기

초능력으로 잇는 이야기_초록우산

웹 사이트는 단순히 브랜드 정보를 나열하는 곳이 아니라, 브랜드를 경험할 수 있는 공간이에요.

브랜드 이미지를 보여주고 고객과 소통할 수 있는 중요한 채널이죠.

그렇기 때문에 일관된 브랜드 정체성을 담아내는 것이 중요한데요.

브랜드가 전하고자 하는 메시지가 명확하고 효과적으로 웹에 구성된다면

고객은 브랜드에 대해 긍정적인 인식을 갖게 되고,

결과적으로 신뢰감과 브랜드 가치를 높이는데 큰 역할을 하게 돼요.

이번에 소개해드릴 초록우산의 캠페인 역시 후원자들에게 메시지를 잘 전달하기 위해
캠페인의 아이덴티티를 개발하고,

이를 웹사이트 디자인에 반영하는 프로젝트를 진행했어요.

오늘은 이 프로젝트가 어떻게 기획되고 구현되었는지 과정을 공유하며,

캠페인의 목표를 어떻게 이루어냈는지 이야기 해보려고 합니다.

📍 프로젝트 소개

Q. 이번에 함께한 초록우산 캠페인에 대해서 설명해주실 수 있나요?

이번에 함께한 초록우산 캠페인은 후원자들을 위한 캠페인이에요.

그동안 아이들을 위해 따뜻한 마음을 전해주신 후원자분들께 감사의 마음을 전하고,

스스로 자신의 기부 활동을 더욱 가치 있게 느끼며 소속감을 형성할 수 있도록 기획되었어요.

캠페인은 북토크, 공연, 전시회 등의 이벤트에 후원자분들을 초대하여 즐거운 경험을 선사하거나,

특별한 혜택을 제공하는 방식으로 진행됩니다.

초록우산이 진행하고 있는 캠페인

초록우산이 진행 중인 기존 캠페인을 간략히 설명드리면 이해하기 쉬우실 것 같은데요. 초록우산은 그동안 아이들을 위한 기부 활동의 인식을 개선하기 위해 다양한 캠페인을 선보여 왔어요. 특히 가치 소비에 관심이 많은 2-30대에 기부 활동의 가치를 전하기 위해 조금은 색다르고 창의적인 접근 방식을 시도하고 있죠.

예를 들어, 초록 우산은 후원자분들을 '초능력자'라고 칭하며,  '당신의 초능력을 보여주세요.' 라는 메시지를 전하고 있어요. 이는 초록우산 후원을 통해 아이들을 행복하게 만들어 주는 능력을 '초록빛 능력', 즉 초능력이라고 표현한건데요. 후원자분들은 이 캠페인 속에서 아이들에게 희망을 전하는 '초능력자'가 된다는 의미에요. 이번 캠페인은 이 스토리를 확장해 '초록빛 능력 초능력을 가진 초능력자(후원자)'들에게 초점을 맞추었어요.

Q. 이번 프로젝트에서는 어떤 작업이 진행되었나요?

캠페인의 이름을 정하는 네이밍 작업부터 시작했어요. 캠페인의 핵심 컨셉을 기획하고, 그에 맞는 스토리텔링과 슬로건을 개발하며, 디테일한 명칭들까지 체계적으로 정리하는 언어자산 구축 작업을 진행했어요.  이후 캠페인의 메시지가 효과적으로 전달될 수 있도록 시각적 비주얼 자산을 만드는 작업을 이어 갔는데요. 후원자들이 메시지를 더욱 쉽게 이해하고 공감할 수 있도록 아이덴티티(EI:event Identity)를 시각적으로 표현하는데 초점을 맞추었어요.

또한 캠페인을 실행에 옮기는데 중요한 역할을 하는 웹 디자인도 함께 진행했는데요. 아이덴티티만 구축한다고 메시지가 잘 전달되지 않아요. 캠페인의 소식을 전하고 캠페인을 소개하는 등 캠페인을 전개해나가는 과정에서 일관된 경험을 제공할 수 있어야 메시지가 잘 전달될 수 있죠. 때문에 일관된 아이덴티티를 구축하고, 이를 다양한 매체에서 일관되게 녹여내어 보여주는 작업이라고 보면 될 것 같아요.

Q. 이번 캠페인은 어떤 컨셉으로 진행되었나요?

이번 캠페인은 2-30대 후원자를 대상으로 설정했어요. 이들에게 메시지를 효과적으로 전달하려면 어떻게 다가가야할지 고민했죠. 2-30대는 자신이 중요하다고 생각하는 것에 기꺼이 소비하는 가치 소비 성향이 두드러지는 세대에요. 때문에 후원 활동 역시 단순한 기부를 넘어, 스스로 가치 있다고 여기기 때문에 기꺼이 실천해가고 있는거라 볼 수 있어요. 이런 특성을 반영해, 고객 페르소나를 '자신이 가치 있다고 여기는 것을 실천해갈 수 있는 사람이며, 자신의 삶을 의미있게 즐길 줄 아는 주체적인 사람' 으로 설정했어요. 그리고 그 이미지를 떠올렸을때 에너지 넘치고 다이나믹한 모습이 그려졌죠.

또한 이 세대가 선호하는 트렌디하고 세련된 분위기를 살려내어, 후원활동이 단순한 참여를 넘어 프리미엄하고 프라이빗한 경험 으로 느껴질 수 있도록 컨셉을 잡았어요.
'우린 좀 특별해' 후원자들이 자신의 활동에 대해 희소가치를 느끼고, 자부심을 가질 수 있는 동시에, 강한 소속감을 형성할 수 있도록 중점을 두어 컨셉을 설정했어요.

📍 캠페인 네이밍

Q. 캠페인의 이름은 어떤 과정을 거쳐 정해졌나요?

네이밍을 정할때는 캠페인에서 궁극적으로 전하고 싶은 메시지에 대해서 생각해보았어요.
초록우산이 이 캠페인을 통해 이루고자 하는 것은 단순히 후원 활동을 하도록 하는 것을 넘어, 아이들이 좋은 어른으로 성장할 수 있도록 길을 만들어주고 그 길을 먼저 걸어간 이들이
좋은 어른이 되어 또 다시 다른 아이들을 보살펴줄 수 있는 선순환을 꿈꾸는 것이라고 느꼈어요. 그런 과정을 가능하게 하는 힘이야 말로 '초록빛 능력'이라고 생각했고요. 이에 '온 세상에 초록빛을 물들이자'는 메시지를 이름에 담아보려고 했어요.

Q. 어떤 네이밍 후보들이 있었나요?

1차적으로는 명사형으로 딱 떨어지는 형태를 떠올렸어요. 또한 이름 자체에 함축적이고 상징적인 의미를 부여해 처음 들었을땐 낯설지만, 의미를 곱씹을수록 캠페인의 본질이 느껴지는 감각적이고 감성적인 이름을 목표로 했죠.

✅ 1차 네이밍 후보

사진은 참고를 위한 예시 자료입니다.

01 당신의 청(靑)춘기
[청춘] : 새싹이 돋아나는 봄, 젊고 건강한 시기를 뜻하며, 직역하면 '푸른 봄' 이라는 의미를 갖고 있어요. 아이들의 희망이 언제나 초록빛으로 푸르기를 바라는 마음과, 후원자들 역시 그런 초록빛 마음을 지닌 청춘이라는 메시지를 담았어요. '아이들에게 봄을 만들어주는 후원자들 역시 언제나 청춘이다.' 라는 메시지를 상징적으로 전달하는 이름이에요.

02 청신호
[청신호] : 앞으로 어떤 일이 잘되어 갈것을 보여주는 징조, 직역하면 초록불을 의미해요.
잿빛 세상에서 초록빛 신호탄이 되어주는 후원자들이 모여 초록빛을 물들인다는 긍정적이고 희망적인 의미를 담았어요. '세상의 모든 초록불을 켜다!' 라는 슬로건을 활용해보면 좋겠다고 생각했죠.

03 녹취록 (綠臭錄)
[녹취록] : 대화의 내용을 녹음한 기록이라는 의미를 가진 단어인데요. 이 단어의 한자를 변경하여 '초록빛 향기의 기록'이라는 새로운 의미를 부여했어요. 후원자들의 아름다운 행보를 기록하는 행사라는 뜻으로, 음악, 미술, 책 등 후원자들이 잊지 못할 따뜻한 기록을 남길 수 있도록 스토리를 상징적으로 전달하는 이름이에요.

Q. 1차 네이밍 작업 이후 피드백은 어땠나요?

1차 네이밍 작업에서 메시지와 분위기는 좋지만, 너무 상징적이고 추상적이라는 피드백을 받았어요. 이름만으로 캠페인의 내용을 직관적으로 이해하기 어렵다는 의견이 있었죠. 많은 사람들에게 대중적으로 다가가야하다보니 좀 더 쉽고 직관적인 이름이 필요하다는 점을 깨닳았죠. 이에 명사형 보다는 명사 +서술어 형태로 메시지를 더 쉽게 풀어내어 전하고자 했어요.

✅ 2차 네이밍 후보

01 초능력이 잇는 이야기아이들의 행복을 지켜주는 초록빛 능력을 이야기 하는 '초능력'이 초능력을 잇는다는 의미에요. 나의 선한 행동이 또 다른 선함을 만들어내는 선순환 과정을 이야기로 풀어낼 수 있는 이름이죠.

02 초록은 녹녹하게[녹녹하다] : 비가 그친 뒤 부드럽고 촉촉한 상태를 의미하며, 영어 단어 Knock(두드리다)와 이중적 의미를 결합했어요. 부드럽고 촉촉한 마음을 가진 후원자들이 모여 아이들의 새로운 길을 두드린다는 메시지를 담았어요. 의 녹녹한 마음으로 KNOCK! KNOCK!' '더 나은 세상을 두드리는 노크!''우리 같이 KNOCK KNOCK' 해볼래? 와 같은 슬로건도 뽑아 보았어요.

03 초능력자답게!후원자들의 페르소나를 자신감 넘치고 당당한 사람으로 정하여 '나다움'을 강조해보았어요.소리 없이 조용히 누군가의 세상을 초록빛으로 물들이고 있는 사람들이야 말로 자신이 원하는 것이 무엇인지 아는 사람이고 자신들이 하고 있는 후원 활동이 얼마나 멋있는 일인지를 잊어가고 있는 사람들에게 초능력자로서의 정체성을 다시금 확인시켜주기 위한다는 메시지를 전해요. '슈퍼 히어로가 아니라, 우리가 세상을 바꾼다. 어떻게? 초능력자 답게!' 이런 슬로건으로 풀어낼 수 있어요.

Q. 어떤 후보가 선정되었나요?

최종적으로는 '초능력이 잇는 이야기'가 캠페인 이름으로 선정되었어요. 초능력이 또 다른 초능력을 만들어 선순환을 만들어나가길 바란다는 메시지가 직관적이고 쉽게 전달될 수 있는 이름이에요. 이어서 이름과 자연스럽게 연결되는 언어자산을 개발했어요.

언어 자산

1️⃣ 카테고리별 명칭 : 캠페인의 세 가지 주요 활동의 이름을 일관되게 정리했어요.
'초능력을 잇는 -' 으로 맞추어 캠페인의 핵심 가치를 강조할 수 있어요.
- 이벤트 : 초능력이 잇는 이벤트
- 자원 봉사 : 초능력이 잇는 자원 봉사
- 혜택 : 초능력이 잇는 혜택

2️⃣ 메인 슬로건 : 캠페인을 진행할때 대표적으로 보여주는 슬로건이에요. 핵심 메시지를 잘 전달하면서도, 기억하기 쉽고 임팩트 있는 입에 착 붙는 문장이에요.
- 슬로건 : 초능력이 잇다!, 초능력이 잇다!

3️⃣ 카테고리별 서브 슬로건 : 각 카테고리들에 대해서 부연 설명을 하기 위한 서브 슬로건을 설정했어요.
- 이벤트 : 초초특급 이벤트 (초록빛 초특급 이벤트)
- 혜택 : 녹녹하면 넉넉해지는 혜택
- 자원봉사 : 초능력자 답게! 우리답게!

이렇게 이름과 스토리, 메시지가 일관되게 열결됨으로써 캠페인에 참여하는 후원자들이 일관된 경험을 할 수 있게 돼요. 이는 캠페인의 취지가 더욱 잘 느껴지고 이해할 수 있게 되죠.

📍 EI 개발

Q. 시각적인 비주얼도 궁금해요! '초능력이 잇는 이야기'를 어떻게 표현하셨나요?

'잇다' 라는 것을 강조할 수 있는 시각적 표현 방법에 집중했어요. 다양한 버전을 시도하며 캠페인에 가장 적합한 이미지를 찾았죠. 잔잔하게 반짝이는 버전, 초능력이 쓰는 히어로처럼 통통 튀는 버전, 마법과 같은 심볼형 버전 등으로요.

1차 시안

다양한 시도 끝에 찾아낸 것은 '선'을 활용하여 '잇다'를 강조하여 표현하는 것이었는데요.'다양한 선들이 모여 이어진 하나의 선' 이라는 스토리를 시각적으로 풀어낸 로고에요. 'ㅅ'과 'ㄴ' 받침을 길게 늘려 연결되는 느낌을 강조했어요.

로고 스토리텔링

기본이 되는 메인 로고가 잡히고 나서는 로고 이외에 보여줄 수 있는 그래픽 비주얼들도 개발했어요. 먼저 이벤트, 혜택, 자원봉사 세가지 카테고리를 시각적으로도 차이를 두어 보여줄 수 있어야 했는데요. 혜택은 녹녹하고 넉넉함을 원형으로 표현하고, 밝고 즐거운 이벤트는 생동감을 강조하기 위해 팡팡 터지는 폭죽형태로 표현했어요. 자원 봉사는 나눔에 대한 마음이 담겨있다 해서 하트 형태로 표현했어요.

키비주얼

전체적으로 비주얼을 풀어낼 때 젊고 생동감 있는 분위기를 보여주고자 했는데요. 이런 분위기를 유지하기 위하여 이미지나 텍스트를 꾸미고 강조하는 그래픽 요소를 개발했어요. 이를 포스터나 배너 등 다양한 곳에 함께 사용할 수 있도록 각각의 레이아웃도 구성했죠. 공연이나 전시 등의 사진은 각기 다르지만 통일된 레이아웃으로 이미지를 적용하여 사용하면 전체적인 통일감을 유지할 수 있고, 아이덴티티를 잘 보여줄 수 있어요.

포스터와 배너 레이아웃

📍 EX 웹 디자인

메인 페이지 배너

Q. 이를 녹여낸 웹 디자인은 어떤 모습으로 개발되었나요?

이렇게 개발된 디자인 시스템을 웹에 일관되게 적용하면서도, 효율적으로 정리하는 방법과 정보를 잘 전달하는 방법들을 개발했어요.

먼저, 전체 메인 페이지에서는 후원자들을 위한 공간임을 따뜻하게 느낄 수 있도록 배너를 제작했어요. 메인 배너에는 캠페인의 메인 슬로건을 강조하며, 이 슬로건이 어떤 것을 의미하는지 부연 설명을 함께 넣었구요. 한 눈에 캠페인의 메시지를 이해하고 공감할 수 있도록 디자인했어요.

카테고리별 레이아웃 시스템

카테고리별 페이지에서는 혜택, 이벤트, 자원 봉사 세 가지 주제를 나누어, 각 섹션에 맞는 배너 템플릿을 제작했어요. 각 배너에 텍스트와 이미지를 어떻게 배치할지 레이아웃을 정해주어 시각적 통일감을 유지하면서도 카테고리마다의 특징이 잘 드러나도록 구성했죠.

콘텐츠 레이아웃

각 카테고리별로 제공하는 콘텐츠에서는 어떤 이벤트가 진행되는지, 어떤 혜택이 제공되는지 앨범 형식으로 게시물이 발행되는데요. 이 역시 디자인 시스템을 개발하여 컨셉이 일관되게 보여질 수 있도록 했어요. 텍스트의 크기, 이미지의 배치 등을 하나하나 가이드를 제공하여 완성도 있는 모습으로 연출 될 수 있도록 했죠.

📍 캠페인 진행 현황

Q. 웹 디자인에서 일관성을 보여주기 위해 많은 작업들이 필요하네요.

그렇죠. 단순히 웹을 예쁘게 꾸미는 것에서 그치는 것이 아니라, 캠페인을 통해 전달하고자 하는 본질적인 메시지를 파악하고 이를 효과적으로 보여주기 위한 전략을 세우는 것이 필요해요. 이번 초록우산 캠페인에서 '초록을 잇다'라는 핵심 메시지와 선순환의 가치를 전달하기 위해 네이밍부터 언어자산, 비주얼, 웹 디자인까지 체계적으로 개발한 것처럼요.

브랜드 역시 마찬가지에요. 우리의 타겟 고객에게 전하고 싶은 메시지가 있따면, 이를 효과적으로 전달할 수 있는 전략을 세우고, 그 전략을 중심으로 웹 디자인을 설계해야해요.

또한, 디자인 시스템을 통해 정해진 레이아웃과 톤앤매너를 일관되게 유지하는 것 역시 매우 중요해요. 브랜드 아이덴티티를 구축하는 것에서 끝나지 않고 구축되어진 것을 고객 경험을 통해 보여주어야 하는데요. 이렇게 시스템을 만들어 두면 일관된 경험을 제공할 수 있어 브랜드의 목표를 보다 효과적으로 이루어 낼 수 있어요.

이번 '초능력이 잇는 이야기' 캠페인은 현재 진행되고 있는데요, 그동안 작업했던 디자인들이 웹에 잘 구현된 모습을 보니 뿌듯하기도 하고 기쁘기도 한 것 같아요. 이번 캠페인을 함께 하며, 초록우산이 단순히 후원을 넘어 가치있는 변화를 만들어가고 있다는 것을 알게 되었는데요. 특히 후원자들에게 '초능력자'라는 특별한 명칭을 부여하고, 그들을 통해 선순환을 만들어가려는 메시지가 참 따뜻하게 느껴졌던 것 같아요. 이 캠페인을 통해 초록우산이 전하고자 하는 가치가 조금이라도 더 잘 전달되길 하는 마음으로 작업을 했던 것 같아요.

현재 진행중인 캠페인 링크를 첨부해둘게요! (링크)

↳ Next Project