webService.Develop.ui
웹 서비스 개발 초기 단계
웹 서비스를 만들기 위해서는 기획, 디자인, 퍼블리싱, 프론트엔드, 백엔드, 데이터베이스가 필요하다. 처음 기획에서 웹 서비스를 어떻게 만들지 스토리보드로 화면 설계를 한다. 스토리보드에는 페이지 레이아웃과 어떤 내용이 들어가는지, 버튼마다 어떤 동작을 하는지 작성한다. 또한 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로 코딩한다고 생각하면 된다.
