아름다운가게(www.beautifulstore.org)는 지난 2016년 4월, 웹사이트를 새로운 웹사이트를 공개했습니다. 이번 웹사이트 리뉴얼(개편)은 슬로워크에서 진행하였는데요. 아름다운가게 웹사이트는 어떤 과정을 거쳐 새롭게 태어났을까요? 그 과정을 소개합니다.

아름다운가게 웹사이트 개편을 위해, 슬로워크와 아름다운가게의 담당자 간 사전 미팅을 여러 차례 진행했습니다. 기존의 웹사이트는 다양하고 많은 콘텐츠를 가지고 있었으나, 사업이 점점 커져감에 따라 메뉴 구조와 디자인 톤에 변화를 주고 사용성을 높여야 하는 상태였습니다. 이를 효과적으로 개선하고자 몇 차례 회의을 진행하였고, 시작 전 리뉴얼의 큰 방향성과 목표를 세웠습니다.



기존의 아름다운가게 홈페이지


아름다운가게 리뉴얼 방향성 및 목표

1. 메인 페이지에서 다양한 콘텐츠를 노출

2. 아름다운가게의 아이덴티티 컬러를 주로 사용하여 따뜻하고 친근한 느낌 전달

3. 각 패밀리 사이트들을 메인 사이트에서도 한눈에 볼 수 있도록 구성

4. 직관적인 디자인을 통해 웹사이트 사용성 제고

5. ‘매장찾기’가 가장 중요하므로, 쉽게 사용자들이 접근할 수 있도록 단독 메뉴화


이 방향을 다음과 같이 적용하여 리뉴얼 작업을 진행했습니다.



1. 메인 페이지에서 다양한 콘텐츠를 노출


대부분 웹사이트의 메인 페이지에서는 큰 사이즈의 메인 배너를 사용하는 것이 아직까지 일반적입니다. 하지만 아름다운가게는 콘텐츠를 다양하게 보여줄 방법을 고민했습니다. 이에 따라, 메인 배너 기능을 하는 요소와 다양한 콘텐츠를 함께 노출하기로 했습니다.


초기 기획안과 (moqups 툴 사용, 관련 내용 더 보기)  실제 운영 중인 현재 메인 페이지 비교


주로 글과 사진으로 이루어진 콘텐츠 중심의 배열로 메인 페이지의 기획안이 확정되었고, 이를 기반으로 다양한 디자인 시안이 오갔습니다. 그 결과 현재 아름다운가게의 메인 페이지는 콘텐츠 위주의 생동감 있는 메인 형태를 취하고 있습니다.



2. 아름다운가게의 아이덴티티 컬러를 주로 사용하여 따뜻하고 친근한 느낌 전달



아름다운가게의 CI는 잎들이 모여 꽃이 된 형태입니다. 이 형태는 나보다 우리를 먼저 생각하고 환경을 지키기 위한 다섯 가지 실천(기증, 되살림, 윤리적소비, 자원활동, 나눔활동)의 상징으로, 나눔과 순환을 소중히 여기는 그물코정신과 되살림정신을 내포하고 있습니다. 특별히 아름다운가게의 색상인 연두색(mild green)은 생명과 환경, 미래와 희망을 상징합니다. 이 메인 색상을 웹사이트에 전면적으로 통일되게 사용함으로써 아이덴티티를 확실하게 전달했습니다.


아름다운가게 주요 컬러가 사용된 아이콘 디자인 예시



3. 각 패밀리 사이트들을 메인 사이트에서도 한눈에 볼 수 있도록 구성



아름다운가게는 여러 패밀리 사이트를 가지고 있습니다. 그 중에서도 자원활동, 나눔교육, 사회적기업센터, 인재채용 페이지는 더욱 중요한데요. 해당 페이지들이 메인 사이트와 함께 한눈에 보이면서도 접근하기 쉽도록 초점을 맞추었습니다. 상단 바에 각 패밀리 사이트들로 이동할 수 있는 탭 구조를 만들었습니다. 이를 통해 메인 사이트와 패밀리 사이트 간에 이동이 자유롭게, 또한 언제든 메인 사이트로 돌아올 수 있게 되었습니다. 또한 다른 패밀리 사이트들은 셀렉트 박스를 통해 이동할 수 있게 상단에 패밀리 사이트들을 배치해 사용성을 높였습니다.



4.  직관적인 디자인을 통해 웹사이트 사용성 제고


아름다운가게 웹사이트 리뉴얼 작업에서 가장 중점적으로 고려한 포인트는 ‘사용성을 높인다’라는 점이었습니다. 다양하고 많은 정보를 가지고 있는 사이트이기 때문에 메뉴 구조부터 디자인까지 복잡하기보다는 심플하고 간결하게 혼란을 주지 않는 것이 중요했습니다. 사이트를 이용하는 연령대와 주 사용자를 고려해 최대한 직관적이고 쉽게 사이트를 이용할 수 있도록 하는 것입니다.


이에 따라, IA(Information Architecture)를 구성할 때 사용자들이 메뉴명만 보고도 어디로 이동할지 고민하지 않고 예측할 수 있도록 메뉴명을 조금씩 변경했습니다. 변경한 사업소개 하위 메뉴명으로, 아름다운가게의 사업을 한 페이지에서 볼 수 있는 ‘사업 한눈에 보기’와 연혁을 대신한 ‘걸어온 길’ 등이 있습니다.


또한, 각 하위 메뉴가 많은 상위 메뉴에는 게이트 페이지를 두어 각 메뉴들에 대한 설명과 어느 페이지로 이동해야 내가 원하는 정보를 얻을 수 있는지 간편히 볼 수 있게 하였습니다. 각 게이트 페이지에서는 하위 메뉴들의 간단한 소개와 사진을 통해 해당 메뉴를 사용자가 인지할 수 있습니다.



5. ‘매장찾기’가 가장 중요하므로, 쉽게 사용자들이 접근할 수 있도록 단독 메뉴화



아름다운가게에서 주요한 참여 방법은 매장에 기부하거나 매장에 방문해 물건을 구입하는 것입니다. 그렇기 때문에 ‘매장찾기’ 메뉴가 사이트 내에서 가장 중요한 역할을 하게 되었습니다. 따라서 매장찾기를 메뉴 중에서도 가장 우선순위에 두어 어떤 사용자가 보더라도 쉽게 눌러보고 확인할 수 있게 유도하였습니다. 또한, 현재 내 위치를 중심으로 가까운 매장을 찾을 수 있고, 검색을 통해서도 매장을 쉽게 찾을 수 있게 했습니다. 지도 위에 매장을 위치를 바로 보여주어 정확성 또한 높였습니다. 해당 매장에 대한 자세한 정보는 팝업 창으로 뜨고 공유, 인쇄하기도 간편하게 구성했습니다. 매장찾기 메뉴를 구성하면서 사용성 테스트를 함께 진행하여 사용자가 원하는 정보와 구성을 최적으로 찾을 수 있었습니다.



아름다운가게 웹사이트 리뉴얼은 킥오프미팅부터 메인 사이트 오픈까지 10개월의 기간이 걸렸습니다. 그만큼 완성도와 사용성에 중점을 두었고, 웹사이트 리뉴얼 이벤트 진행 당시 사용성이 높아졌다는 후기를 받으며 성공적으로 운영하고 있습니다. 리뉴얼한 아름다운가게 웹사이트, 지금 방문해보세요!


by 양 발자국


Posted by slowalk


기업의 로고를 변경한다는 것은 쉬운 결정이 아닙니다. 그럼에도 불구하고 기업이 로고 리브랜딩을 추진하는 데는 다양한 이유가 있습니다. 이런 중대한 리브랜딩에 앞서 변수들을 파악하는 것은 디자이너의 몫입니다. 이번 포스트에서는 로고 리브랜딩을 시작하기에 앞서 미리 파악해두어야 할 몇 가지 포인트들을 소개합니다.




1. 왜 기존의 로고가 기능하지 않나요?


시작하기에 딱 좋은 첫 번째 질문으로, 클라이언트와 디자이너가 서로를 이해할 수 있는 출발점입니다. 클라이언트가 대답하기에 적절하고 디자이너로서 추론하기에 좋은, 균형 잡힌 질문입니다. 로고가 기능하지 않는 이유는 다양합니다. 가독성, 뭔가 어긋난 느낌, 역동적이지 않음, 기업명 변화 등. 가장 흔한 이유는 구식 외형입니다. 이런 정보를 클라이언트에게서 이끌어 내야 합니다.


모튼 솔트 로고 변화 (자료 출처: Morton Salt)



기존의 모튼 솔트 로고가 기능하지 않았던 이유는 무엇일까요? 모튼이 클라이언트라고 가정하면, 뭐라고 묻는 것이 좋을까요? “기존의 로고가 구식인가” “브랜드 이미지에 색이 부족하다고 생각하나” “소녀가 귀엽지 않고 조금 무섭게 생겼나” 등이 있을 것입니다. 이런 의문들이 리브랜딩 과정에서 떠올랐다면, 새로운 디자인에는 약간의 컬러와 좀 더 순수하고 귀여운, 현대화된 소녀 일러스트레이션이 가미 됩니다.





2. 유지되어야 하는 것은 무엇인가요?


디자이너에게 어떤 엄청난 영감이 떠올랐다고 해도, 클라이언트 입장에서 고수하고 싶은 요소가 있을 수 있습니다. 이러한 것을 미리 묻지 않는다면, 시간만 낭비되고 결과물도 만족스럽지 않을 것입니다. 유지되어야 하는 것은 특정 색이 될 수도 있고, 타입 스타일(세리프 혹은 산세리프), 특정 대소문자, 혹은 상징적 의미일 수도 있습니다.


나사 로고 변화 (자료 출처: NASA)



나사(NASA) 리브랜딩 과정을 살펴보면, 1975년에 현대적인 로고가 도입되고 1992년에 다시 예전의 로고로 되돌아갑니다. 나사 원로 멤버들의 새 로고에 대한 거부감, 달 착륙 이후 약해진 사기를 북돋기 위해서 등등의 이유가 거론됩니다. 어찌 되었건 새로운 로고가 계속해서 사용되지 못한 데에는 유지해야 할 것, 바로 나사의 미션과 그 상징성을 간과한 데 있을 것입니다.




3. 기존의 로고에서 얼마나 변화를 줄 수 있나요?   

           

쉐브론 기존 로고와 리브랜딩 된 로고



두 번째 질문과 비슷한 질문입니다. 하지만 조금 더 ‘느낌’에 중점을 두고 있습니다. 클라이언트가 원하는 것이 ‘약간의 터치' 인지, ‘완전한 메이크오버'인지 파악해야 합니다. 현재의 로고에서 변화를 준 다양한 스케치들을 미리 보여주는 것도 좋습니다. 클라이언트는 스케치들을 보며 어디까지 변화가 가능할지 생각해 볼 것입니다.


2000년대 초반의 3D 유행에 맞춰, 쉐브론은 로고를 변경합니다. 완성된 로고를 보면 그들의 선택은 ‘기존의 로고에서 그리 많이 바꾸지 않은' 로고였습니다. 오래된 형태를 약간 현대적으로 다듬은 것입니다. 디자이너와 클라이언트가 많은 대화를 나누었음이 드러납니다. 의도적으로 약간의 변화만 준 것이 분명하기 때문입니다.




4. 기존의 로고가 강력한 비주얼을 갖고 있거나, 사회적인 연관성을 가지고 있나요?


로고 리브랜딩 시 가장 흔한 문제점은 클라이언트의 기존 소비자들이 이미 오래된 로고에 애착을 가지고 있다는 것입니다. 이 애착이 얼마나 강한지, 급격한 로고 리브랜딩(혹은 약간의 리브랜딩)이 얼마나 큰 결과를 초래할지 충분히 검토해야 합니다. 리브랜딩이 기존의 소비자들을 혼란스럽게 할 것인가? 혹은 완전히 새로운 소비자 군을 확보할 수 있을 것인가?


애플의 로고 변화



매우 강력한 비주얼 연관성을 가진 좋은 예시는 애플입니다. 애플 로고는 디자이너가 절대 건드릴 수 없는 영역이죠. 이 리브랜드에서도 그것이 분명히 드러납니다. 아이콘의 브랜딩이 너무 강력해서 어떠한 수정도 비즈니스에 심각한 영향을 미칠 수 있습니다. 누구도 이 아이콘을 없애거나 수정하려고 하지 않았습니다.




5. 새로운 로고는 어떻게 활용될까요?


바이오블리츠 서울 어플리케이션들



모든 로고 디자인, 특히 로고 리브랜딩에 중요한 질문입니다. 클라이언트가 새로운 비즈니스를 시도하려고 할지도 모르며, 디자이너는 그에 맞춘 로고를 만들어내야 합니다. 실제 제품에 적용되는 로고는 패키지, 컵 등에 맞추어 다양한 변용이 가능해야 합니다.



로고를 리브랜딩 할 때 위의 다섯 가지 질문을 던지면 많은 시간과 에너지를 절약할 수 있습니다. 물론, 질문이 여기서 끝날 필요는 없습니다. 클라이언트와 더 많은 소통을 할 수록 좋은 결과물이 나오는 것은 당연합니다. 좋은 디자인의 첫걸음은 대화입니다.



출처: 99designs



by 돼지 발자국


Posted by slowalk

슬로워크의 다양한 프로젝트와 디자인 작업물을 만나볼 수 있는 공간! 슬로워크 홈페이지(slowalk.co.kr)에 방문해보신 적이 있나요? 초창기 3명의 직원으로 시작해 이제는 25명의 구성원이 일하는 회사로 성장한 슬로워크. 양적인 크기뿐 아니라 더 깊이 있게 다양한 영역을 확장해가는 슬로워크에게 홈페이지 리뉴얼은 꼭 필요한 과정이었습니다. 



기존의 슬로워크 홈페이지



슬로워크만의 스타일과 기존 홈페이지의 쉽고 간편한 방향성은 유지하되 확장된 크기와 사업 영역에 맞춰 전문성을 더하고, 많은 분들께 조금 더 친절하고 가깝게 다가가는 홈페이지를 만들기 위한 고군분투! 실력과 열정을 겸비한 슬로워크 웹 개발실에서 개발, 디자인하고 슬로워크의 각 구성원들이 지속적으로 함께 참여해 만들어가는 slowalk.co.kr을 소개합니다. 



리뉴얼된 슬로워크 홈페이지



움직임 | 매일, 최근의 정보들이 자동으로 업데이트 되는 메인 페이지




메인 페이지의 상단 4개의 박스는 블로그, 슬로데이(Sloday), 슬로워크 캠페인&프로젝트, 보트포그린(I Vote for Green) 캠페인 등 각각의 역할을 가지고 있습니다. 각 사이트와 연동되어 매일매일 그리고 가장 최근의 자료들이 자동으로 업데이트 되는 구조로 만들어졌는데요. 블로그와 슬로데이, 보트포그린의 경우 매일, 슬로워크 캠페인은 가장 최근의 자료가 업데이트 됩니다. 각 영역을 클릭하면 해당 사이트로 이동하여 보다 자세한 정보를 살펴볼 수 있습니다. 메인 페이지의 하단 부분은 슬로워크 페이스북과 트위터의 글이 실시간으로 올라오는 구조로 되어 있어 홈페이지의 생동감을 더합니다.



연결 | 링크로 연결되어 원하는 정보로 쉽게 접근할 수 있는 유연한 구조




새롭게 바뀐 슬로워크 홈페이지에서는 유난히 클릭을 해서 다른 페이지로 연결되는 링크를 많이 볼 수 있는데요. 홈페이지에서는 쉽고 간결하게 표현하되, 블로그에 있는 컨텐츠를 연결하여 더 깊이 있고 풍성한 홈페이지를 만들고자 하였습니다. 각 작업 별 간단한 설명과 링크를 클릭하여 슬로워크 블로그에서 관련된 포스팅 내용을 자세히 살펴볼 수 있습니다. 





또한 관련 태그와 각 구성원의 이름도 클릭을 할 수 있는데요. 태그를 클릭하면 관련된 키워드의 작업들을 찾을 수 있습니다. 작업과 함께 게시된 디렉터와 디자이너의 이름을 클릭하면 개인별로 참여한 작업들을 한번에 모아서 볼 수 있습니다. 슬로워크의 홈페이지면서 또 각 구성원의 포트폴리오가 될 수도 있는 유연한 구조입니다. 





인포그래픽 카테고리는 그래픽 이미지를 클릭하면 큰 이미지로 실제 정보를 확인할 수 있도록 구성하였습니다.



친절함 | 한 눈에 파악해서 볼 수 있는 썸네일(thumbnail) 이미지




한 눈에 작업들을 쭉 모아 볼 수 있는 썸네일 이미지 형태는, 작업물 전부가 쭉 펼쳐져 있던 기존 홈페이지와 큰 차이점이라 할 수 있는데요. 예전의 작업들을 찾기 위해 일일이 페이지를 많이 넘겨봐야 했던 기존 홈페이지의 단점을 보완하여, 작업들의 작은 대표 이미지를 통해 한 눈에 쉽게 들어오는 포트폴리오를 만들었습니다. 빠르게 필요한 이미지들을 찾을 수 있고, 슬로워크 디자인의 스타일과 각 작업물의 특성을 한 눈에 살펴볼 수 있습니다.





뉴스와 프레스 부분도 썸네일 이미지로 정보를 판단하여, 클릭했을 때 상세한 설명을 만나볼 수 있습니다. 썸네일 만으로도 수많은 정보들 속에서 빠르게 필요한 정보를 선택하여 볼 수 있다는 장점이 있겠지요.



구체성 | 사진으로 촬영해 실제적인 이해도를 높인 포트폴리오





기존 홈페이지에서는 작업 대부분이 그래픽 이미지로 표현되어 있는 경우가 대부분이었는데요. 실제로 인쇄된 책자, 브로슈어, 그리고 구조가 복잡한 패키지 작업물의 경우 물성을 표현하는데 한계가 있었던 것이 사실입니다. 그래서 이번 홈페이지 리뉴얼을 통해서 실제로 인쇄된 작업물은 사진으로 촬영하여 실제적인 이해를 도울 수 있도록 하였습니다. 앞으로 자체적으로 지속 가능한 포트폴리오 촬영을 위해 장비 구입, 교육, 여러 가지 실험을 통한 자체 촬영 프로세스를 만들어가는 중에 있습니다.^^  



간결함 | 복잡하지 않은 메뉴 구성




메뉴 구성에 있어서는 불필요하게 많은 카테고리나 여러 번 클릭해야 하는 복잡한 단계를 피하였는데요. 각 카테고리 당 4개를 넘지 않는 하위 카테고리, 한번에 펼쳐지는 구성으로 메뉴 구조를 단순화시켜 사용자 접근성과 이해도를 높였습니다. 



편의성 | 모바일 환경에서의 편의성




리뉴얼된 슬로워크 홈페이지의 큰 장점 중에 하나. PC, 태블릿PC, 스마트폰 등 어디에서도 편리하게 최적화되어 볼 수 있다는 점인데요. 단 수의 차이만 있을 뿐 태블릿PC와 모바일 환경에서도 불편함 없이 PC와 같은 기능으로 슬로워크 홈페이지를 이용할 수 있습니다.



처음 슬로워크에 입사 지원할 당시, 웹 상에서 다른 정보를 찾기 쉽지 않았던 재야의 숨겨진 조직이었던 슬로워크. 그 때 slowalk.co.kr에 올라와 있던 단 몇 개의 포트폴리오가 한줄기 빛처럼 느껴졌던 기억이 나는데요.^^ 그만큼 회사의 홈페이지는 관심을 가지고 지켜보는 사람들, 클라이언트, 입사를 희망하는 사람들에게 간접적으로나마 회사를 경험해보고 다양한 프로젝트를 공유하고 소통하는 공간이라 할 수 있겠지요. 


그런 공간인 만큼 실제와 보여지는 것 사이의 간극을 줄여 더 가깝게 다가갈 수 있는 slowalk.co.kr이 되도록 노력하겠습니다. 많은 관심 가지고 함께 지켜봐주세요. :-)




by 해달 발자국




Posted by slowalk