웹 서비스 개발 초기 단계

웹 서비스를 만들기 위해서는 기획, 디자인, 퍼블리싱, 프론트엔드, 백엔드, 데이터베이스가 필요합니다. 처음 기획에서 웹 서비스를 어떻게 만들지 스토리보드로 화면 설계를 합니다. 스토리보드에는 페이지 레이아웃과 어떤 내용이 들어가는지, 버튼마다 어떤 동작을 하는지 작성합니다. 또한 UX의 관점에서 전체 흐름과 레이아웃을 설계합니다.

 

UX는 User Experience로 사용자 경험이라는 의미입니다. 사용자가 서비스를 이용하면서 직접 또는 간접적으로 느끼는 총체적인 경험을 바탕으로 더 나은 경험을 할 수있도록 구성과 화면을 디자인하는 것을 말합니다. 더 설명하기에는 이 과정과 맞지 않아, 이 정도로 간단히 설명하고 넘어가겠습니다. 

 

스토리보드가 작성되면, 화면 레이아웃을 디자인합니다. 이 작업을 UI User Interface 라고 합니다. UI는 서비스의 컨셉과 통일성 있는 디자인과 색상, 눈의 흐름, 강조 등을 고려하여 디자인합니다. 대부분 Adobe사의 Photoshop을 사용하지만, 요즘은 sketch를 많이 사용합니다. 

 

UI 디자인과 함께 개발적인 측면에서는 스토리보드의 화면단위로 개발 설계를 진행합니다. 어떤 데이터가 필요한지, 데이터의 구조는 어떻게 설계되야 하는지, 화면별로 필요한 데이터와 요청할 데이터가 어떤 것인지 등을 설계하게 됩니다. 이때 DB 데이터 베이스 설계가 진행되고, 로직 설계, 가능하면 API 설계도 진행됩니다. 

 

logic은 ‘논리, 논법, 조리'의 의미를 가지고 있습니다. ‘논리'는 이치에 맞게 이끌어가는 과정이나 원리라는 사전적 의미가 있습니다. 

 

프로그래밍에서 논리는 원하는 결과를 얻는 과정에서 데이터가 오류 없이 원활히 흘러가는 흐름을 말합니다.

 

API는 Application Programming Interface로 애플리케이션을 사용하거나 제어하기 위한 인터페이스로, 다시 말해 서버 프로그램을 사용하기 위한 인터페이스를 말합니다. 인터페이스란 ‘접점, 대화, 연락'등의 의미로 컴퓨터에게 지시하거나 대화하기 위해 장치입니다. 인터페이스는 일상 생활에서 쉽게 접할 수 있습니다. 리모컨, AI 스피커, 키보드, 마우스 등도 인터페이스에 해당합니다. 바로 앞에서도 말한 User Interface는 사용자가 서비스를 사용하기 위해 디자인된 화면을 말합니다.

---

UI 디자인이 완성되면, 다음으로 퍼블리싱 publishing이 진행됩니다. UI 디자인은 이미지 파일로 되어 있습니다. photoshop 일 경우에는 .psd 파일로 저장이되고, sketch로 작업이 되면 .sketch로 파일이 저장됩니다. 이런 이미지 파일을 웹 브라우저에서 보여주기 위해 각 영역이나, 버튼들을 잘라서 resource로 만듭니다. resource는 ‘자원'이라는 의미로 화면을 구성하기 위한 ‘자원'들의 모음이라고 생각하시면 됩니다. 

 

퍼블리싱은 ‘출판'이라는 의미입니다. 실제적으로 웹 브라우저로 ‘출판'한다고 생각하시면 됩니다. ‘출판'하기 위해서는 이미지 파일 같은 자원이 필요하며, 디자인된 화면의 구조대로 웹 브라우저에 그대로 적용합니다. 

 

책을 ‘출판'하는 것과 비슷합니다. 책을 ‘출판'하기 위해서는 표지, 작가의 글, 삽화 또는 이미지 등이 필요합니다. 그냥 이미지만 넣어서 출판하는 책도 있지만, 일반적으로 ‘출판'하기 위해서는 책의 크기와 자간, 행간 등을 고려하여 쉽게 읽힐 수 있게 편집을 해야합니다. 이러한 편집 작업을 퍼블리싱이라고 해도 무난할 듯 합니다. 

 

디자인된 아무런 기능이 없는 정적인 화면을 클릭이 되고, 동적인 화면으로 만드는게 퍼블리싱의 역할입니다. ‘정적인'이라는 말은 정지되어 있는 상태이고, ‘동적인'이라는 말은 움직이는 활동적인 화면을 말합니다.

 

퍼블리싱은 전체 화면 구조를 html로 만들고, 디자인된 화면과 같이 디자인을 적용시키기 위해 스타일을 적용합니다. 이런 스타일을 css-Cascading Style Sheets로 작업하게 됩니다.  Cascading 은 ‘작은 폭포, 여러단으로 된 폭포'라는 단어도 가지고 있지만 ‘계단식, 종속'이라는 의미도 내포하고 있습니다. 

 

마치 계단식으로 도출된 바위에 폭포가 떨어지는 형태라고 생각하시면 이해가 쉬울 듯 합니다. Cascading Style Sheets 스타일을 지정한 시트인데, 각 스타일이 종속되어 있는 개념입니다. 전체 적으로 글자 크기를 12포인트로 적용하고, 타이틀은 굵은 볼드체로 하고, 인용문은 눕힌 이탤릭체로 한다면 볼드와 이탤릭체는 전체 글자 크기에 종속되었다고 볼 수 있습니다. 이렇게 종속되어지면서 스타일이 적용되는 시트가 css 입니다.

 

html로 구조를 잡고, css로 디자인을 입혔으면, 동적인 화면을 만들고, 버튼을 클릭했을때 어떤 동작이 일어나는지를 만들어야 합니다. 이 작업을 javascript가 합니다. javascript는 코딩입니다. html의 구조를 제어하거나 클릭했을때 어떤 동작을 하는지 코딩을 합니다. 또한 css를 제어하고, 디자인을 바꾸기도 합니다. 화면의 모든 동작을 javascript로 코딩한다고 생각하시면 됩니다.

---

개발쪽으로 넘어가서 데이터 베이스나 API 설계가 되면, 데이터 베이스 설계에 따라 실제적으로 DB 데이터 베이스 프로그램에 적용합니다. 실제 적용하는 것을 implement ‘구현'이라고 합니다. DB는 무료인 maria db나 유료인 mysql, oracle, ms를 사용합니다. 규모가 큰 프로젝트인 경우 oracle를 많이 사용하며, 중규모 정도는 mysql, 소규모나 개인은 대부분 maria db를 사용합니다. 

 

DB를 구현하면서 로직도 설계에 따라 구현합니다. 화면에 가져와야할 데이터를 DB에서 검색해서 로직에 따라 데이터를 가공한 후 화면에 전달합니다. 이러한 과정을 개발하는 것을 BackEnd 개발이라고 합니다. 단어에서 말하듯이 뒤에서 처리하는 것을 말합니다. 

 

대부분의 개발은 backend를 말하며, 다른 말로 서비스 개발이라고도 합니다. db에서 데이터를 검색해서 데이터를 전달해 주는 부분이기 때문에 데이터를 서비스해 준다는 의미로 사용됩니다. backend 개발은 주로, java, python, php, c#, c++ 등의 언어를 사용하여 개발합니다. 프로그래밍 언어는 interpreter, compiler 언어가 있지만, 자세한 것은 나중에 다시 설명하도록 하겠습니다. 

---

backend에서 요청받은 데이터를 db에서 검색해서 로직에 따라 데이터를 가공하고 데이터를 전달해 주는데, 이러한 데이터를 요청하고 전달 받는 것을 frontend가 담당합니다. frontend도 단어처럼 앞단 에서 처리하는 것을 말합니다. 

 

앞서 설명했던 퍼블리싱은 디자인된 화면을 동적인 화면으로 만드는 것을 말합니다. 다시 말해, 퍼블리싱은 화면 구현이 주 목적입니다. 데이터를 보여주는 것도 퍼블리싱의 영역이지만, 좀 더 세분화 하여 backend에 데이터를 요청하고 전달 받은 데이터를 화면에 맞게 보여주는 역할은 퍼블리싱이 아닌 frontend의 역할입니다. 

 

frontend에서도 backend에서 받은 데이터를 가공하여 화면에 보여줄 수도 있습니다. 그냥 단순히 전달 받은 데이터를 화면에 그대로 보여주는 것이 아닌, 리스트 형태로 가공하여 보여줄 수도 있고, 데이터에 따라 화면의 다른 부분을 변경할 수도 있습니다. 

 

frontend는 backend와 같이 로직으로 구현되기 때문에 frontend 개발이며, backend와 마찬가지로 개발영역입니다. frontend 개발은 주로 react, vue, angularjs, 아이폰 개발 언어인 Objective C, 안드로이드 개발 언어인 java, kotlin을 사용합니다.

 

---

지금까지 기획, 디자인, 퍼블리싱, frontend, backend, db를 살펴보았습니다. 구현하는 부분만 좀 더 크게 나누어 보면, 퍼블리싱, frontend는 client이고, backend, db는 server로 구분됩니다. client 개발이라고 하면 퍼블리싱, frontend 개발이고, server 개발이라면 backend, db 입니다. client와 server가 한 묶음이라고 보시면 안됩니다. 

 

server는 하나이지만, client는 여러개일 수 있습니다.

 

데이터를 API로 서비스해 주는 server가 있다면 API를 통해 데이터를 받아 웹으로도 개발될 수 있고, 모바일 앱으로도 개발될 수 있습니다. 상품을 예로 든다면 상품을 제조하는 공장이 server이며, 제조된 상품을 판매하는 곳을 client라고 할 수 있습니다. 상품판매는 백화점이 될 수 있고, 온라인이 될 수 있고, 시장 또는 개인이 판매할 수 있기 때문에 client는 server하나에 여러개의 채널을 가질 수 있습니다.

 

---