디자인 실무이론 : 기업 브랜딩 - 2. 웹 디자인
기업을 소개하는 첫 얼굴이자, 정보의 연결점 - 웹 페이지 디자인
안녕하세요, 리플러스입니다. 이번 기업브랜딩 관련 시리즈는 기업의 로고, 문서규격, 복장, 제품디자인 등에 이르기까지 한 기업의 정체성을 시각적으로 보여주는 실무과정을 이야기해보는 시간이 될겁니다. 그런 기업 브랜딩에 관련된 이야기들 중에 - 오늘은 웹디자인을 하는 방법에 대해서 이야기해보려고합니다.
기업 브랜드 디자인 : 웹 디자인
기업이 자신을 드러내는 방식에는 여러가지가 있습니다. 기업이 자신을 드러내는 통합적인 방법을 크게 브랜딩이라고 하며, 그 브랜딩의 과정 중에서 웹디자인이란. 회사가 자신을 드러내기위한 웹페이지를 디자인하는 일입니다. 웹디자인의 과정은 - 기획 / 디자인 / 구축의 과정으로 이뤄집니다. 이번 게시글에서는 웹디자인을 위한 기획과정에 대해 이야기한 이후 - 디자인과 구축을 위한 기본적인 상식에 대해 이야기해보도록 하곘습니다.
한 회사가 가진 여러 정보를 압축해놓은 웹페이지 규격
기본적으로 웹디자인은 모든 업체가 갖고있어야하는 기본적인 규격입니다. 회사에 대해 알려주고, 뭘 하는 곳인지, 어떤걸 추구하고있는지. 기존에 어떤 일들을 했는지 등등을 이야기해줄 수 있는 공간이거든요. 그래서 요즘 시대에 웹페이지를 갖고있지 않는 회사는 찾아보기가 힘들정도입니다. 물론 차후에 이야기할 - 웹페이지형 블로그나, 페이스북 같은 SNS 기반 페이지를 기본 홈페이지로 사용하고있는 경우는 제외하고 말입니다.
기획자와 디자이너가 웹디자인에 있어서 고려해야할 사항들은 분명 여러가지가 있겠지만. 핵심적으로 보았을 때는 웹페이지의 제작목적. 이 한가지를 깊게 파고들어가는것만으로도 충분합니다. 이 웹페이지를 통해 누가, 어떤 정보를 받아들일것이고. 이 웹페이지에서 어떤 서비스를 제공하게될 것인지. 그 자체만 확인하면 크게 문제가 없습니다. 일반적으로 기업에서 사용되는 웹페이지의 형태는 크게 두가지입니다.
1. 기업의 서비스를 직접 제공하거나 / 그 연결을 위한 : 서비스형 웹페이지
2. 기업에 대해 홍보하거나 / 내부 소식을 알리기 위한 : 정보성 웹페이지
1. 서비스형 웹페이지 사례 : 쏘카 (SOCAR)
https://www.socar.kr/
서비스형 웹페이지의 좋은 사례로, 쏘카가 있습니다. 쏘카는 원하는 차량을 원하는 시간대에 빌릴 수 있는, 차량공유 서비스입니다. 렌트카에 비해서도 저렴하고, 사용이 간편하다는 면에서 큰 인기를 얻었죠. 쏘카는 웹페이지 자체에서 서비스 이용을 바로 진행할 수 있고, 개별 사용자에게 적합한 서비스를 진행하기 위해 회원가입 구조를 갖고있습니다. 해당 웹페이지에 들어오면 - 서비스에 대한 소개와, 이용을 위한 안내, 회원가입, 차량 빌리기를 단숨에 진행할 수 있습니다. 직접적인 서비스가 아니라 제품 제공인 경우에도, 쇼핑몰과 같은 형태 역시도 서비스의 제공이라고 보시면, 이해가 쉬우실듯 합니다. 이러한 과정을 회원 / 비회원으로 정리하면 다음과 같습니다.
1) 회원의 입장 : 회사에서 제공하는 서비스를 웹페이지 상에서 - 바로 사용할 수 있도록 돕습니다.
2) 비회원의 입장 : 이 회사가 어떤 회사인지,어떤 서비스를 제공하는지 정보를 전달합니다. 또한 회원가입을 진행할수도 있습니다.
모든 서비스형 웹페이지가 회원가입 개념을 갖고있는건 아니지만. 대부분의 서비스들은 개인정보와, 그들의 서비스 이용 기록을 갖고있는 경우가 많습니다. 그렇기에 자연스럽게 회원 가입을 유도하게되고, 개인을 특정할 수 있는 정보를 입력하지 않으면 서비스 이용이 불가능한 구조가 되죠. 그렇기에 가능한한 사용자의 진입장벽을 낮추고, 쉬운 이용을 위해 많은 고민을 하게됩니다. 그렇기에 웹페이지를 제작하는 사람의 입장에서는. 회원과 비회원구조라는 것이 나뉘었을 때. 회원에게 보여주어야할 웹페이지와, 비회원에게 보여주어야할 웹페이지를 어디까지 나눌 것인지. 그리고 비회원이 회원가입을 하게 유도하는 과정이 굉장히 중요합니다.
또한 서비스형 웹페이지에 가입한 신규 회원의 경우 - 아무리 좋은 서비스에 가입해도. 그걸 사용하는 방법을 잘 모르는 경우가 많습니다. 그런 신규회원들이 '이 웹페이지에서, 자신이 원하는 서비스를 어떻게 찾고, 이용하게할 것인지. 직관적인 구조와 정보전달이 꼭 필요해지는 지점이죠. 그렇기 때문에 기획자나 디자이너들의 입장에서는 서비스를 어떻게 소개하고, 이용하게할 것인지. 실제 유저들의 사용과정과, 사용패턴에 대한 부분을 고민하게됩니다.
-
기획자와 디자이너가 - 서비스형 웹페이지 기획에 있어, 기본적으로 고민해야할 사항은 다음과 같습니다.
1) 비슷한 서비스가 있다면. 해당 서비스에서 사용자들이 불편함을 겪고 있는 부분은 어떤 부분인지.
2) 회원가입이 필요하다면, 어떻게해야 사용자가 입력해야할 필수정보를 최소화할 수 있는지.
3) 회원가입 이후, 신규 사용자가 서비스에 대해 이해하고, 불편이 없게 하려면 어떻게 해야하는지.
4) 이 서비스를 웹페이지로만 제공해야하는지. 아니면 앱을 통해 추가로 제공하는 것이 나은지.
5) 내부 컨텐츠가 변화할 경우, 디자이너가 아닌 실무자가 해당 내용을 쉽게 편집할 수 있는지.
2. 정보성 웹페이지 사례 : 삼성 SDS
https://www.samsungsds.com/global/ko/index.html정보성 웹페이지의 좋은 사례로, 삼성 SDS 웹페이지가 있습니다. 삼성 SDS는 하나의 기업이라고 하기보다, 여러가지 서비스에대한 총괄적인 정보를 제공하고, 세부 서비스 웹페이지로 연결하는 허브 역할을 합니다. 이 역시 엄밀히 보면 서비스 제공을 위한 부분이라고 할 수 있겠지만. 기본적으로 큰 틀에서 자신들이 어떤 사업을 갖고있고. 어떤 일들을 하고있는지를 소개하는 역할이 강하기 때문에 정보성 웹페이지의 좋은 사례로 볼 수 있습니다.
정보성 웹페이지는 서비스 제공을 위한 방식과는 다르게. 자신들이 어떤 방향성을 갖고있고, 또 어떤 일들을 하고있는지. 그리고 기존에는 어떤 일들을 해왔는지에 대해 설명하는 경향이 강합니다. 또한 회사 자체적으로 제공하는 서비스가 있다고 하더라도, 그걸 웹페이지 상에서 바로 도와줄 수 없는 규격의 서비스이거나. 제품인 경우 - 전화나 개별 연락을 통해 서비스를 제공받을 수 있도록 하는 경우가 대부분입니다. 또한 이런 구매과정은 웹 상으로 단순화될 수 없거나, 큰 금액을 지불해야하는 경우가 많습니다. 그렇기 때문에 웹페이지를 통해 자신들의 서비스가 얼마나 대단하고, 좋은지에 대한 가치판단을 - 돕는 과정이 꼭 필요하죠.
-
서비스형 웹페이지와, 정보성 웹페이지의 비교
1) 서비스형 웹페이지 : 서비스의 구매와 실제 이용이 온라인을 통해 이뤄질 수 있다.
2) 서비스형 웹페이지 : 서비스 이용에 걸리는 시간이 짧고, 거래되는 금액의 규모가 상대적으로 작다.
3) 정보성 웹페에지 : 대부분 서비스의 판매를 직접적인 목표로 두지 않는다. 또한 서비스의 판매가 이뤄지더라도 그보다 정보전달 자체가 목적인 경우가 많다.
4) 정보성 웹페이지 : 서비스의 구매와 실제 이용은 대부분 오프라인 상에서 대면하거나 / 담당자와의 상담 후에 이뤄진다.
5) 정보성 웹페이지 : 서비스 이용에 걸리는 시간이 길고, 거래되는 금액의 규모가 상대적으로 크다.
정보제공이 목적이 주가되는 웹페이지는 대부분 - 공지사항이나 소식을 전달하고, 이벤트 개최나 결과, 혹은 외부의 언론보도 등의 정보들을 모아놓는 경우가 많습니다. 크게 보면 상품을 판매하는 것이 목적이냐 (서비스형 웹페이지). 아니면 정보를 제공하며 - 부가적으로 서비스 제공을 위한 연락처를 오픈해놓느냐. 혹은 아예 자기자랑이나 회사, 혹은 제품의 우수성에 대해서 이야기하느냐 (정보성 웹페이지) 정도로 나눌 수 있겠네요.
대부분의 경우 정보성 웹페이지는 일반 사용자들에게 모두 공개가 되는 경우가 많습니다. 말 그대로 스스로의 대단함에 대해 알아달라는 공개된 자료들이기 때문에. 회원가입 규격이 있는 경우는 그리 많지 않습니다. 물론 일반정보와 프리미엄 정보를 구분하는 형태가 된다면 조금 더 차이는 있겠지만. 기본적인 핵심이 정보 전달과 홍보를 목적으로 한다는 점에서. 정보성 웹페이지는 정보의 전달과, 회사 자체의 철학. 혹은 디자인 스타일을 보여줄 수 있는 중요한 페이지가됩니다. 서비스형 웹페이지에 비해 기능적인 측면이 크지 않기때문에. 더 자유로운 규격을 사용할 수 있는 것도 이 때문이고, 기획보다 디자인 스타일이 중요해지는 것도 이런 이유 때문입니다.
-
기획자와 디자이너가 - 정보성 웹페이지 기획에 있어, 기본적으로 고민해야할 사항은 다음과 같습니다.
1) 회사가 전달해야하는 중요한 정보들은 어떤 것들이 있고, 얼마나 자주 만들어지는지.
2) 정보를 보러오는 대상은 일반인 / 투자자 / 구매자들 중 어떤 사람들인지.
3) 회사의 특색을 잘 드러낼 수 있는 디자인 규격과 스타일은 어떤 것인지
3. 웹페이지를 구축하는 방법 : HTML 코딩과 프레임워크, 웹 툴킷
웹페이지라는것은 기본적으로 실체가 없는 웹 공간에 만들어진 사이트입니다. 실제 그 데이터를 담고있는 서버는 세상 어딘가에 존재하겠지만. 우리는 그 서버가 어디있는지. 또 누가 그걸 관리하고있는지는 알 필요가 없죠. 또한 디자이너가 포토샵을 통해 바라보는 디자인 결과물과는 달리, 그 시안을 직접 웹페이지로 만들어내려면, 기계가 이해할 수 있는 웹 언어인 HTML이란 언어로 코딩작업을 진행해야합니다. 그렇기 때문에 디자이너가 아니라 웹개발자로서의 능력이 꼭 필요한 부분이죠. 물론, 모든 웹 디자이너가 HTML 코딩을 통한 웹페이지 제작을 할 필요는 없겠지만. 기본적인 상식으로 이해하고있어야하는 이유도 여기에 있습니다.
포토샵과 일러스트레이터같은 디자인용 툴에서는 모든 오브젝트들이 그저 색과 범위, 곡률과 위치값을 갖고있는 시각물일 뿐입니다. 디자이너의 감각이 더 중요하고, 세부적인 코딩같은건 아무래도 상관이 없죠. 그러나 웹페이지나 앱과같은 - 물리적인 기기에 띄워지는 시각물들은 - 그런 것들과는 많은 차이를 갖고있습니다. 해당 기기나, 프로그램들이 어떤식으로 동작하고. 또 무엇을 어디에 넣어야 효율적인 구동이 가능한지 알아야합니다. 그렇지 않고서는 웹개발자가 따로 있다 하더라도 의사소통이나, 작업 진행에 어려움이 생기기 쉽습니다.
디자이너나 기획자들은 시각적인 부분에서 웹페이지 시안을 보지만, 개발자들은 HTML 언어를 통해 구조를 갖고있는 거대한 구조체를 바라봅니다. 심지어는 버튼 하나를 만들어도, 이미지가 먼저 나서는 것이 아니라. HTML 규격 내에서 버튼을 불러오는 언어 함수를 알아야하죠. 그냥 딱 보기엔 그냥 시각물이고, 저게 색이 어떤색인지를 보는 디자이너들의 입장에서. HTML 이라는 규격은 직관성이 많이 떨어지는 편입니다. 여기서 디자이너와 개발자의 시선을 정리해보면 다음과 같습니다.
1) 디자이너 : 자신의 감각을 기반으로 웹페이지의 시각적 아름다움에 대해 고민한다.
2) 디자이너 : 웹페이지 시안이 실제로 어떤 구조를 갖고있는지, 어떻게 구현되어야하는지를 잘 알지못한다.
3) 웹 개발자 : 웹페이지 시안이 HTML 언어에 기반해, 어떤 구조로 구현되어야하는지를 고민한다.
4) 웹 개발자 : 디자인적 감각이 아니라, 기존에 만들어진 프레임 워크를 기반으로 웹페이지를 구성한다.
디자이너는 개발적인 부분에 대해 취약하고. 개발자는 디자인 감각에 대해서 상대적인 약점을 갖고있습니다. 심지어는 웹페이지가 만들어진 이후에 - 내부 컨텐츠를 변경하거나. 새로 팝업을 띄우는 등의 문제가 생겼을 때. 그 해결법은 일반적인 실무자는 전혀 알지 못하죠. 그러니 디자인을 조금만 변경하고싶어도 큰 돈을 들여서 다시 개발자를 불러야하고. 디자이너도 불러야하는, 머리아픈 상황이 반복되었던 것이 현실입니다. 이런 문제를 해결하기 위해 만들어진 것이 프레임워크. 다른말로 해서 웹 킷(Web Kit) 웹페이지를 만들기 위한 사전도구라는 개념입니다. 그중 유명한 워드프레스라는 규격 역시도. 일반 사용자와 / 디자이너 / 개발자의 사이에서 소통이 원활하고, 빠른 시간내에 아름다운 웹페이지를 만들기 위해 자주 사용되고있는 도구죠.
워드프레스의 장점은, 일반인도 며칠만 배우면 왠만한 수준의 홈페이지를 제작할 수 있는 편한 접근성 부분입니다. 일단 블로그를 제작하는 수준으로, 기본적인 기능을 제공하고. 다양한 스킨을 제공하기 때문에. 사용자가 너무 많은 지식을 알고있지 않아도, 새로운 웹페이지를 제작할 수 있도록 도와줍니다. 또한 웹페이지가 만들어진 이후에도 내부 페이지를 수정하거나. 컨텐츠를 업로드할 때에도. 일반적인 블로그와 같은 방식으로 게시글을 작성 / 첨부할 수 있는 편리한 도구입니다. 물론 개발자적인 측면과, 실제 사용자적인 측면. 그리고 디자인 에디터로서의 개념까지 함께 담고있기 때문에. 우리가 사용하는 단순 블로그 에디터나, 문서편집기에 비해 직관성이 떨어지고, 개념적 이해를 하기가 어려운게 사실입니다. 다만 맨땅에 헤딩하듯이 HTML을 당장 배우는 것 보다. 며칠 정도 사용해서 워드프레스 튜토리얼을 보는게 훨씬 실무자 입장에서는 편리하고, 빠릅니다.
PC 웹과 모바일 웹페이지를 동시에 제공하는 워드프레스의 테마들
또다른 워드프레스의 장점중 하나는 반응형 웹 개념도 포함하고있다는 점입니다. 한 웹페이지를 통해 모바일, 타블렛, PC웹까지의 지원을 제공하는 방식인 반응형 웹은, 해당 기기의 해상도를 읽어, 각 기기에 적합한 비례와 구조로 컨텐츠를 보여주는 방식을 택하고있습니다. 그렇기 때문에 한 웹페이지를 만드는것만으로도 - 사실상 모든 기기에서 적절한 해상도의 웹페이지를 확인할 수 있다는 것이죠. 물론 세부적으로 들어가자면 - 이런 기기 해상도별 최적화란 완벽하진 않습니다. 그래서 개별적으로는 기기별 해상도와, 규격에 맞는 수정작업이 꼭 필요합니다. 하지만 그런 과정에 대해서 잘 알지 못하는 디자이너나, 기획자의 입장에서는. 이런 기능을 기본적으로 제공한다는 자체가 - 굉장한 이득이라고 할 수 있는거죠.
물론, 프레임 워크나, 웹 툴킷을 사용한다해서 모든 웹페이지를 단번에 만들 수 있다는건 아닙니다. 시각물을 어떻게 쓸 것인지. 그리고 세부적인 기능은 어떻게 추가할 것인지 등의 - 디자인적 / 개발적 기능에 대해서 알지 못하면, 결과적으로 개발자나 디자이너가 꼭 필요해지죠. 다만, 기획자나 디자이너의 입장에서 - 복잡하지 않은 기능을 가진 블로그성 / 갤러리성 홈페이지의 경우. 어렵지않게 제작할 수 있습니다. HTML 언어를 굳이 배우지 않고, 며칠만 투자해도 상업적으로 사용할 수 있을만한 퀄리티의 웹페이지를 만들 수 있으니, 실무자들에게는 매우 유용한 툴이죠. 그렇기에 기획자나, 디자이너로서의 능력은 좋은데, HTML을 배우기 어렵다 - 라고 생각하는 분들의 경우. 워드프레스와 같은 규격을 통해 웹디자인에 입문해보시는걸 추천합니다.
-
굳이 워드프레스를 통해 웹디자인을 마스터하지 않더라도 웹개발자들이 어떤식으로 생각하고, 실제 기능을 구현하는지를. 시각적으로 잘 보여주고있기 때문에. 디자이너와 개발자, 기획자와 사용자의 측면에서도 꼭 배워볼만한 툴입니다.
https://ko.wordpress.org
이외에도 쉽게 웹페이지를 만들고싶은 분들을 위해 - 다음과 같은 방식이 있습니다.
1) 기존의 SNS를 메인 채널로 이용하는 방법 (페이스북, 블로그 등)
2) 네이버의 modoo.at 과 같은 기본 규격이 잘 정리된 서비스를 이용하시는 방법
-
1) 기존 SNS를 메인 채널로 이용하는 경우
기존 SNS를 사용하는 방식의경우, 제한이 되는 점이 있긴 하지만. 실제 업체들중에서도 이런 방식을 쓰는 경우가 종종 있습니다. 기본적으로 꾸며야할 부분도 많지 않고. 실제 컨텐츠에 집중할 수 있기 때문에. 사용도 쉽고. 따로 트래픽과 웹 주소 호스팅 비용을 낼 필요가 없기 때문에, 소규모 업체들이 매우 선호하는 방식입니다. (트래픽과 호스팅에 대해서는 추후에 다뤄보도록 하겠습니다.) 물론 해당 SNS 기본 규격의 제한이나, 운영정책 등에 매우 쉽게 흔들릴 수 있고. 심한 경우 페이지 자체가 삭제되거나, 검열되는 경우도 있기 때문에. 분명 제한선은 존재합니다.
2) 네이버의 modoo.at 과 같은 기본규격이 정리된 서비스를 이용하는 경우
웹을 찾아보다보면, 미리 만들어진 탬플릿 기반으로 홈페이지와 호스팅을 비용을 함께 넣어 판매하는 경우가 종종 있는데요. 네이버에서 나온 modoo.at의 경우 무료인데다, 규격적으로도 매우 깔끔해서. 가장 추천드릴만한 규격중 하나입니다. 다른 업체들에서 제공하는 어줍잖은 디자인 탬플릿들보다 깔끔하고. 결제시스템에 대한 고민이 따로 필요가 없습니다. 네이버에서 만든 시스템이다보니 네이버페이를 직접 연결할 수도 있는데다. 1;1 알림메시지 등도 네이버계정을 통해서 연계할 수 있다는게 장점입니다. 물론 네이버에서 제공하지 않는 커스터마이징은 불가능하긴 하지만. 왠만한 홈페이지 규격은 모두 제공하고있고. 아마추어가 홈페이지를 제작하는 것에 비해서 월등한 디자인적 수준을 자랑하기 때문에. 이 부분을 추천드립니다.
https://www.modoo.at/home
-
이외에도 탬플릿형 제작주문 (임대형) 제품이나, wix같은 편집형 서비스도있지만. 워드프레스나 HTML 순수코딩 등 - 전문가가 사용하는 방식에 비해 발전성이 떨어지고. 코드도 너무 옛날방식으로 만들어져 유지보수가 불편한다는 점에서, 이번 게시글에는 해당 서비스에 대한 소개는 제외하였습니다.
이번 게시글에서는 웹페이지 제작을 위한 방향성 기획 / 그리고 실제 구현에 대한 방법을 알아보았구요. 다음편에는 웹페이지를 순수하게 직접 만든다고 했을 때. 꼭 필요한 홈페이지의 구성요소에 대한 설명과 레이아웃 배치. 웹페이지를 구성하기위한 최소한의 시각물 규격, 그리고 최근 유행하고있는 카드형 디자인 스타일 웹디자인에 대해 알아보도록 하겠습니다. 그럼 다음에 봐요!
http://clay1987.blog.me/221229583871
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
