디지털 프로덕트 브랜딩 디자인 케이스 스터디 ⎯ part 2

디지털 프로덕트 브랜딩 디자인 케이스 스터디 ⎯ part 2

디지털 프로덕트 브랜딩 디자인 케이스 스터디 ⎯ part 2

Case study

Self study

Self study

·

2024. 3. 24.

Mar 17, 2024

Mar 17, 2024


최근에 이끌었던 디지털 프로덕트의 브랜딩 디자인 프로젝트의 디자인과정을 여러분과 공유합니다. 이는 세 부작 시리즈의 두 번째 이야기로, 브랜딩 디자인 과정의 다양한 측면에 대한 심층적인 통찰력을 제공할 것입니다. 구체적으로, 이 아티클에서는 Part 1 에서 결정된 디자인 디렉션을 토대로, 다른 디자이너들과 실무에서 Diverge & Converge 과정을 거쳐 디자인이 어떻게 점진적으로 개발이 되었는지 살펴봅니다.



📣 이 아티클은 교육적인 목적을 위해 작성되었습니다. 결과에 초점을 맞춘 사례 연구를 읽고싶으시다면, 여기에서 공개된 기사를 읽어보세요.


Creative direction


크리에이티브 디렉션이란 무엇인가요?


크리에이티브 디렉션은 브랜드 개발의 중요한 측면으로, 브랜드의 정체성을 형성하는 창의적인 개념을 포함합니다. 창의성과 전략을 결합하여 아이디어를 광고 캠페인, 로고, 마케팅 자료와 같은 구체적인 요소로 변환합니다.


디자인 결과물의 구체적인 내용에 대해 탐구하기 전에, 크리에이티브 디렉션 단계에서는 브랜드의 전반적인 미적이고 시각적 정체성을 확립합니다. 이는 모든 후속 디자인 작업의 톤과 방향을 설정하여 다양한 요소들 사이의 일관성과 일관성을 보장합니다.



피그마를 열기도 전에...


브랜드 이름이 결정된 후, 디자인 소프트웨어에 뛰어들기 전에 마인드맵을 통해 브레인스토밍 세션을 진행했습니다. "슈퍼웨이브"라는 이름은 많은 작은 파도가 만나는 곳에서 발생하는 거대한 에너지를 의미하며, 이 이름은 흥미롭고 다채로운 가능성을 가지고 있습니다. 그러나 서핑 문화와 너무 밀접하게 관련될 수 있는 개념들을 걸러내어 브랜드 성격과 일치시키는 것이 필요했습니다.



Diverge


브랜드 전략을 통해 전반적인 브랜드를 이끌기 시작할 때, 에이전시와 인하우스 팀(저와 헬렌) 간에 두 가지 작업 흐름이 만들어졌습니다. 각자 아이디어를 독립적으로 브레인스토밍한 다음 이를 공유하고 발전시키기 위해 모였습니다. 이렇게 Diverge와 Converge의 과정을 계속하면서 작업이 진행되었습니다. 결과를 통해 이런 작업물이 나왔습니다.



Converge


상당한 노력을 기울인 결과, 후속 디자인 작업물은 우리가 결정한 디자인 디렉션과 유사해지기 시작했습니다. 에이전시가 제시한 디자인 컨셉은 더욱 세련되고 조정되어 우리의 비쥬얼 언어와 더 잘 부합하도록 개선되었습니다. 우리 팀은 특히 스케일이 가능한 웨이브 모티프를 맘에 들어 했는데, 이것을 통해 다양한 흥미로운 모양을 만들 수 있었습니다. 전체적으로 색상 조합이 너무 어두워 보이고 지나치게 포화되어 보이는 점은 제게는 별로였지만, 전반적인 방향은 더욱 명확해졌습니다. 이러한 진전으로 인해, 더 자세한 비쥬얼 요소로 디자인을 분해하여 실질적으로 이 요소들이 실질적으로 사용할 수 있게 작업물을 작업 하는 시간입니다.



💬 Side story: 디자인 에이전시와의 협업과 갈등


에이전시에 프로젝트를 브리핑할 때, 제 비전과 전략을 충분히 전달했다고 믿었습니다. 그러나, 저는 디자인 에이전시가 실행(execution)에 도움을 줄 것으로 기대했지만, 우리는 다시 Diverge 단계로 돌아가서 다른 디자인 디렉션에 대한 제안을 받았습니다. "신뢰할 수 있고 도움이 되며 개인적인" 브랜드 디렉션에 부합하는 것을 기대했는데, 대신 "해변에서 친구들과 파티를 즐기는" 방향이 제안되었습니다. 이 시점에서 역할 분담과 우리 팀이 에이전시에게 무엇을 기대하는지 명확하게 표현했어야 했지만, 어떤 점에서는 혼란스러웠고 팀을 믿기로 선택했습니다.


몇 일 후, 에이전시의 의견을 수렴하지 못하고 프로젝트에 지나치게 집착한다는 피드백을 받았습니다. 이런 종류의 피드백을 받으면 기분이 좋지 않아요 😔. 특히 모두가 프로젝트의 성공에 동일하게 투자하고 있을 때, 제가 고집스럽게 비켜서 인식될 수 있다는 가능성에 대한 잠재적인 경고였습니다. 책임감을 느끼며 피드백을 진지하게 받아들였습니다. 처음에는 안좋은 감정에 휩싸였지만, 에이전시 매니저가 도움이 되는 해결책을 제시했어요. 이 미팅은 자기 반성과 성장에 대한 소중한 기회로 작용하였고, 결과적으로 프로젝트 진행을 위한 역할을 더 명확히 할당할 수 있었습니다.




디자인 결과물 — 드디어!


브랜드 전략, 색상, 디테일, 그리고 브랜드 이름까지 포함하는 시각적 내러티브를 만들어 나가는 여정은 복잡하면서도 즐겁습니다. 이 과정의 각 측면에서 다양한 Diverge&Converge 프로세스가 전개되었으며, 최종 결과물을 형성했습니다.


컬러


초기 디렉션에서 제시된 색상은 실제 적용 측면에서 여전히 추상적으로 남아 있었습니다. 이러한 색상이 실제 프로덕트으로 어떻게 번역될지 결정하는 것이 중요했습니다. 색상 접근성과 스케일을 고려하여, 제가 많은 옵션을 탐색하고 올바른 것을 찾을 때까지 여러 가지 색상을 살펴보았습니다. 접근 가능한 색상을 찾아내는 과정은 어렵지만, inclusive 디자인을 위해 필수적입니다. Figma 플러그인, Supa Palette, 을 활용하는 것이 빠른 색상 스케일 생성을 가능하게 해주어 매우 유용했습니다. 접근성을 위한 올바른 색상을 얻기 위해 다양한 색상을 반복하는 과정은 시간이 오래 걸렸지만, 플러그인 사용으로 시간을 절약할 수 있었습니다. 이 여정은 별도의 글이나 비디오로 더 탐구될 예정입니다. 업데이트를 기대해 주세요!



로고


로고 디자인은 항상 도전적이고 어렵게 느끼는 디자인 분야입니다. 로고 타입과 로고 마크에 대해 수많은 컨셉을 탐색했지만, 어느 것도 완전히 만족스럽지 않았습니다. 그러나 하나의 옵션이 우리 팀에게 눈에 띄었습니다: "슈퍼웨이브"라는 타입이 파도 모티프 내에서 자연스럽게 흐르며 매혹적이고 리듬감 있는 시각적 경험을 만들어냈습니다. 이 디자인은 슈퍼웨이브의 Primary 로고가 되었습니다. 우리의 멀티 프로덕트 전략을 고려할 때, 작은 매체에서도 가시성이 유지되는 로고 마크가 필수적이었습니다. 따라서 로고마크에는 파도 모티프를 통합하여 유연성과 확장 가능성을 추가했습니다.



타이포그래피


에이전시가 제안한 글꼴은 미적으로 매력적이었지만, 저는 자카르타 플러스를 선택하기로 결정했습니다. 이 글꼴은 현대적이고 깔끔한 형태로, x-height이 조금 높아져 대문자와 x-height 사이에 명확한 공간을 제공하고 있으며, 개방된 카운터와 균형 잡힌 간격을 갖추어 다양한 크기에서 가독성을 유지합니다. 특히나, 이 폰트는 구글에서 제공하는 폰트입니다(무료🤑)! 자카르타는 인도네시아의 수도로, 지리적 구성에 의해 다양한 파도와 서핑스팟이 특징인 나라로서 저에게 더 다가왔습니다. 그러나 프로덕트에 쓰일 폰트는 가독성을 더 향상시키기 위해 다른 글꼴을 탐색해야 했습니다. 가독성이 좋은 타입페이스를 어떻게 찾는지는 별도의 글이나 비디오로 더 탐구될 예정입니다. 업데이트를 기대해 주세요!



비쥬얼 문법


브랜딩에서는 각 요소가 스토리텔링에 기여하고 브랜드 이미지를 구축해야 합니다. 크레에이티브 디렉션에서 가져온 파도 모티프를 어떻게 반복하여 브랜드 이미지를 강화할지 고민했습니다. 파도 모티프의 크기와 위치를 다양하게 변형함으로써, 우리는 다채로운 영향력 있는 그래픽을 만들어냅니다. 이 접근방식은 시각적 일관성을 유지하면서도 우리의 대상자와 연결되는 독특한 경험을 전달합니다.




이 프로젝트를 진행하면서 다양한 시각적 요소, 문법, 그리고 스타일을 탐험하는 것은 참으로 즐거운 여정이었습니다! 프로젝트에 일부분은, 특히 로고디자인부분, 상당한 도전을 제시했지만, 브랜드 가이드라인을 다시 돌아보면서 모든 노력이 완전히 가치 있었다고 자신 있게 말할 수 있습니다.



오늘은 여기까지입니다! 이 시리즈의 다음 아티클을 기대해주세요. 거기서는 웹사이트 디자인 작업에 대한 자세한 내용을 다룰 예정입니다. 🌼