brunch

You can make anything
by writing

C.S.Lewis

by Willlink Feb 12. 2019

A_15 개발자와 협업 꿀팁 2
웹 구조를 이해하라.

웹서비스는 자동차와 같다.

웹은 평면이 아닙니다. 웹 개발자와 협업을 하기 위해서 기본적으로 웹이 어떻게 구성되어있는가를 알아야 합니다. 물론 웹 기획자가 있다면 좋겠지만 항상 웹 기획자를 두고 일을 하는 상황이 오지는 않을 것입니다. 디자이너가 디자인을 하는 부분은 웹서비스 전체 구조로 보면 크지 않습니다. 하지만 고려해야 하는 부분은 전체적인 구조를 이해해야 합니다. 디자이너는 흔히 말하는 퍼블리싱의 영역에 한정하여 디자인하지만 퍼블리싱단에 들어가는 요소들은 전체 구조에서 오기 때문입니다.

웹이 무엇인지 지난 시간 설명했습니다. 그렇다면 웹이나 앱에서 서비스는 어떤 구조로 사용자에게 도달하는 것일까요? 물론 개발자 분들이 이해하고 바라보는 만큼 입체적이지 않을 수 있으나, 웹을 만들어가는 과정에서 디자이너가 어떤 부분을 어떻게 신경 써야 하는지에 대한 이야기를 하려 합니다.

크게 3가지로 분류하자면 프런트엔드, 백엔드, 관리자라고 볼 수 있습니다. 사실 개발자들에게는 프런트엔드와 관리자는 동일하게 보일 것입니다. 프런트엔드와 관리자단은 자동차의 내부와 외부 디자인과 같습니다. 즉 눈에 보이는 부분이죠. 다만 운전자만 만질 수 있는가 아니면 타인도 만질 수 있는가의 차이라고 생각하면 좋습니다. 디자이너들은 평면적인 이야기를 하지만, 개발자는 입체적으로 웹이나 앱 서비스를 바라봅니다.

프런트엔드, 관리자, 백엔드는 자동차의 외형 내부 엔진과 유사하다.

프런트란 일반적으로 보이는 화면을 말합니다. 자동차로 친다면 외형입니다.

관리자란 특정 유저에게(운영자) 보이는 화면입니다. 여기서는 수집한 정보를 분석하거나 권한을 주는 등의 처리를 합니다. 자동차로 친다면 내부 디자인입니다. 외형에 노출되지는 않지만 내부 구조를 만질 수 있는 다양한 버튼과 기능이 존재합니다. 또한 이는 자동차의 움직임을 직접 컨트롤합니다.

백엔드란 DB를 쌓아 놓는 창고와 같습니다. 서비스 운영에 있어 정보를 수집여 분류하고 정보를 화면상에 전송하기위한 준비를 하며 관리자 페이지에서 관리를 할 수 있게 만듭니다. 자동차에 비유하면 엔진과 같은 기계장치입니다. 주유구를 통해 들어온 정보를 저장하고 이를 적절히 사용하여 자동차가 움직일 수 있도록 합니다. 또한 주유구는 기름을 받아들여 자동차의 외형(프런트엔드)과 내부(관리자) 엔진(백엔드)을 움직입니다. 웹이 데이터를 월드와이드 웹이라는 가상공간에 띄우고 이를 하이퍼링크 등을 통해 쉽게 접근하도록 한다는 개념을 이해한다면 3박자가 얼마나 서로 입체적이고 상호작용이 중요한지 알 수 있을 것입니다.

하지만 처음 웹을 접하는 디자이너와 기획자는 이러한 개념을 이해하지 못하고 있을 확률이 큽니다. 몇몇 사람과 일을 해보면 금방 알 수 있죠, '개발자는 왜 항상 불가능하다고 말하는가'라는 의문에 대한 답이기도 합니다.

엔진이 들어가지 않는 외형을 디자인한다거나 안전을 위협하는 디자인이나 설계가 받아들여질 리가 없고, 가끔 하늘을 나는 자동차를 만들어달라는 사람들도 많기 때문입니다.

기획자는 서비스에 대한 방향을 잡는 사람이다.

기획자는 트럭인지, 불도저인지, 승용차인지를 기획합니다. 어떤 기능을 하는 어떤 서비스이다를 기획하죠 그리고 특장점을 넣기 위해 다양한 기능들을 고안합니다. 이를 개발자와 디자이너가 이해할 수 있도록 설계도를 제시하고 디자이너는 이러한 기능들을 반영하면서도 대중에게 더 편하고 아름답게 보일 수 있는 외형과 내부를 디자인합니다. 그리고 개발자는 이에 맞는 기술적인 부분을 해결하면서 웹이 탄생합니다. 서로가 서로의 업무영역에 합의를 보며 진행을 해야 한다는 뜻입니다.

기획자가 설계도를 넘기기 전에 개발자가 구현이 가능하고 현실성이 있는지에 대한 이야기를 개발자와 합의를 해야 하며 이 합의된 내용을 디자이너에게 잘 전달해 주어야 합니다. 웹 설계는 기본적으로 DB로 어떤 정보들을 수집할 것인지를 정하고 난 후 어떤 정보를 유저에게 표현하며 유저로부터 어떤 방식으로 수집할지를 정하며, 데이터들을 어떤 식으로 관리자단에서 유의미한 데이터로 활용할지를 함께 고려해야 합니다. 이는 단순히 기획자만 고려해야 할 문제가 아닙니다. UI 디자인 과정에서 불필요한 버튼이 없는가 혹은 수집하는 데이터를 활용할 수 있도록 하는가에 대한 고민을 해야 한다는 것입니다.

디자이너는 서비스를 더 심미적이고 효율적으로 보여주는 사람이다.

디자이너는 기능에 대한 이해도를 바탕으로 어떤 데이터를 어떻게 보여주는 게 더 효과적일지 고려하며 디자인을 진행해야 합니다. 웹과 종이가 어떻게 다른지에 대한 이해도도 갖고 있어야 합니다. 디자이너는 좁은 범위에서는 외형을 디자인하고 넓게 본다면 핸들이나 내부의 버튼까지 디자인을 할 것입니다. 하지만 엔진과 같은 기계 부분을 고려해야 합니다. 문이 열리는 방식, 트렁크가 열리는 방식에 대한 고려를 말합니다. 혹은 기능적으로 트럭인지, 승용차인지 등등까지 고려대상이 될 수 있습니다. 개발자들에게 웹디자인을 이야기할 때 어떤 데이터를 어떻게 프런트상으로 가져올 것인지에 대한 구조적인 이야기로 접근한다면 개발자들은 훨씬 빠르고 쉽게 이해합니다.