웹의 이해 - 웹 프로세스

안녕하세요

날라리기획자 입니다.

이전 시간에 웹의 각 요소에 대한 설명을 드렸는데요, 이번에는 웹의 각 요소가 어떠한 흐름으로 진행되는지 전체적인 프로세스를 훑어 보는 시간으로 하겠습니다.

각 요소의 심층적인 이야기를 먼저 하려고 했으나 전체적인 구조나 흐름을 모르면 더 어려운 설명이 될 것이기에 전체적인 이야기에 대해 먼저 언급하도록 하겠습니다.

---

1. 웹서비스의 흐름

여러분들의 이해를 돕기 위해 재미있는 지름신 강림의 흐름도를 예제로 삽입하였습니다.

위의 이미지를 보시면 Yes와 No에 따라 처리되는 사항이 같거나 다른데 기획자는 저 각기 다른 처리 상황에 따라 어떠한 내용과 화면을 보여주어야 하는지에 대한 전체적인 이야기의 화면을 (스토리보드) 기획하는 사람이라고 보시면 됩니다.

웹서비스는 모두 저런 흐름을 타면서 서비스되고 해당 영역에 맞는 광고, 마케팅, 서비스 타겟과 컨셉을 제공하고 있습니다. 

자 그럼 웹의 각 구성요소는 어떤 흐름을 가지고 있을까요?

웹서비스의 흐름을 간단히 표현한 내용입니다.

예를들어 설명하면, 

1. 네이버에서 로그인정보 입력 (화면단: 클릭이나 입력으로 정보를 줌)

2. 서버가 해당 내용을 받아 DB에서 로그인 정보가 맞는지 판단 (서버와 DB단)

3. 정보가 불일치 또는 없는 내용이면 해당 사항에 맞는 팝업 또는 다른 서비스 화면으로 이동

4. 정보가 일치한다면, 로그인 된 정보의 화면 (가입된 카페, 메일 정보를 DB에서 가져와)에 표시

이렇듯 화면의 정보와 기능을 User가 선택(클릭)하면 해당 정보와 맞는 내용을 Server가 DB에서 확인하여 그에 맞는 다양한 서비스를 제공하는 프로세스를 가지고 있습니다.

---

2. 웹서비스 흐름에 따른 담당자의 역할

자, 그럼 각 요소별 담당자들의 역할을 알아보도록 하겠습니다.

1. 기획자는 User에게 보여줄 화면에 대한 기획을 합니다. 스토리보드 작업이라고도 하며, 이 작업에는 UI/UX와 사용자의 사용 패턴, 기대, 유도 등의 다양한 방법을 통한 인터렉션(상호작용)의 기능을 적어냅니다. 벤치마킹 또는 기획된 의도에 따라 디자인에 참고할 사항도 기재하게 됩니다. (이렇게 이렇게 디자인해주세요~~)

2. 퍼블리셔와 디자이너는 해당 기획서를 받아보고 전체적인 구도와 구조를 잡아가게 됩니다. 이때 디자이너의 UI/UX 관점이 다시 반영될 수도 있으며 HTML구조상 구현이 불가능한 내용이 발생한다면 기획자와의 상의를 통해 재기획될 수 있습니다. 이 작업이 끝나면 퍼블리셔와 디자이너는 각기 필요한 사항에 대해 협의하여 디자인하고 HTML문서를 잡아나가기 시작합니다. 그 내용에는 화면상의 구조(그리드: 배열, 배치), 화면 크기, 구조에 따른 이미지 크기, 갯수 조정, 이미지가 아닌 텍스트의 크기, 색감 등을 조정하게 됩니다. 

3, 4. 개발자는 스토리보드를 받고 현재 시스템(서버, DB 등)으로 구현이 가능한 지의 여부와 새로 구축, 개발해야하는 사항에 대해 구분합니다. 또한 화면에 필요한 데이터를 적절히 뿌려주고 관리하기 위해 어떠한 데이터를 어디에 저장하고 서로를 연결해야 하는지 설계를 시작하게 됩니다. 이때 중요한 것은 해당 서비스가 얼만큼의 트래픽(예: 동시접속, 사용자)을 받아들 일 정도여야하는지, 속도와 각 디바이스간의 충돌여부 등에 대해 충분한 고려를 해야 한다는 것입니다.

조금 헷갈릴 수 있겠으나 다시 정리하자면 

디자이너는 기획의도와 HTML구조에 맞는 화면의 전체적인 색과 이미지를 만들어 내고

퍼블리셔는 해당 문서의 구조와 연결(링크)에 관한 작업을 진행하는 것입니다. 

개발자는 해당 문서에 들어갈 내용, 그림, 동작 등 실제 문서 안에서 구현될 내용과 퍼포먼스에 대한 작업을 한다는 것입니다.

예를들어, 우리가 문서를 작성할 때, 문서의 구조(제목, 내용, 이미지 첨부 시 배열 등)은 퍼블리셔의 역할에 해당되며 제목, 내용, 이미지 등 해당 영역 안에 들어가는 실제 데이터와 동적인 내용들은 개발자의 영역이라고 생각하면 되는 것입니다.

---

여기까지가 간단한 웹서비스의 흐름과 각 담당자의 역할을 설명한 것입니다. 처음 웹이라는 내용에 대해 접하시는 분들이라도 아마도 어렵지 않게 그 내용을 이해하실 수 있으실 것입니다.

궁금하신 점은 메일이나 댓글 주시구요, 각 담당자에 따른 심층적인 설명은 다음 시간에 설명하도록 하겠습니다. 

알아 두실 것은 기획자는 굳이 기술에 대한 전문적이 지식을 알 필요는 없다는 것입니다,하지만 전체적인 구조와 흐름은 알고 있어야 한다는 것입니다. 그래야 더 정확하고 좋은 서비스를 기획할 수 있기 때문입니다.