웹사이트 포트폴리오를 위한, 웹 개발 기초 배우기
웹어플리케이션과 웹사이트의 차이, 웹의 역사, 서버와 클라이언트
본격적인 워드프레스를 통한 웹사이트 빌딩에 앞서, '웹'에 대한 기초 지식을 배워보기로 했다. 셈플라이스 테마를 이용하고, 워드프레스를 이용한다한들 정작 '웹'에 대한 기초가 없이 부딪히는 것에 한계를 느꼈기 때문이다. 웹에 대해 배워야 결국 웹사이트도 자유자재로 제작할 수 있는 힘이 길러짐을 깨달아, 본 매거진에서는 웹사이트제작을 위해, 내가 배운내용을 정보수집과 함께 정리해보고자 한다. 본 공부는 리플러스에서 공유해주신 'HTML과 웹개발 기초' 플레이리스트의 순서를 따랐고, 이는 생활코딩에서 무료로 올라온 강의에 기반된 것이다. 웹어플리케이션을 만드는 방법에대한 플레이리스트인데, 우선 이 절차를 따라해보면 웹의 기초를 이해하기에 좋다. 생활코딩은 무료로 웹개발 등에 대한 여러 강의를 해주는 채널인데, 정말 초보자도 이해하고 따라하기가 쉬워서 매우 감사하고 유용한 채널이다.
본 포스팅에 앞서, UX/UI디자이너에게 웹 개발, 웹디자인 능력이 왜 필요한지 영상으로 간단하게 짚고 넘어가보면 좋을 것 같다. 웹사이트 포트폴리오의 중요성도 알 수 있다.
1. 웹 어플리케이션과 웹 사이트의 차이는?
가장 먼저, 웹 어플리케이션은 무엇인지 궁금했다. 웹사이트와는 다른 것인가? 관련 정보는 위 링크를 참고했다.
웹사이트는 사용자가 컨텐츠를 소비하기 위해 어떤 웹 페이지에 들어가서 컨텐츠를 단순히 소비만하는 경우이다. ex) 네이버 웹툰, 네이트 판 등
웹어플리케이션은 사용자가 움직이고, 클릭하고, 검색하고, 새로운 컨텐츠를 제공하고, 웹 페이지와 유저사이에 상호작용이 활발하게 이루어지는 공간이다. ex) 넷플릭스
그렇기에 포트폴리오는 웹사이트의 형태로 만들어지는 것이 일반적일 것이다.
2. 웹 어플리케이션 만드는 순서
구상 -> 기획 -> 디자인 -> 개발(프로그래밍 또는 엔지니어링) -> 테스트 (QA)
디자인과 개발은 순서가 엄격하게 지켜지는 것은 아니며, 개발이 끝난 뒤 최종적으로 테스트를 거친다.
조직이 큰 경우에는 테스트만 전문적으로 하는 직군이 있기도 하다.
여기서 QA란, Quality Assurance 의 줄임말로, 놓친부분을 잡아내며 테스트를 하는 것을 일컫는다.
기획
기획은 매우 중요하고 심도있는 부분이기 때문에, 사전에 심도있는 연구가 필요한 부분이다. 본 강의에서는 개발위주기때문에, 기획은 간단하게만 짚고넘어갔다.
UI(User Interface) : 사용자가 시스템을 제어하는 데에 사용하는 조작 장치
UI 모델링 : 사용자 입장에서 동작하는 기능을 가상으로 만들어보기
모델링 도구는 ? 손그림, Pencil (무료, 오픈소스 프로그램), Balsamiq (유료,손으로 그린 것 같은 모델링), Powerpoint (기획자들이 가장 많이 사용하는 도구)
Start Small 개념
출처 : 생활코딩, 웹 애플리케이션 만들기 - 웹 에플리케이션을 만드는 순서구상부터 테스트까지 끊임없이 반복하면서 꾸준히 해나가는 것이 중요한데, 이를 위해 중요한 개념은 Start Small이다.
Start Small이란, 작게 시작해서 끊임없이 반복해나아가는 것이 필요하다. 개발이란 것은 굉장히 복잡하기 때문에 실제로 완성도 못하고 끝나는 경우가 많다. 따라서 처음부터 모든 기능을 만드려하기 보단, 최소한의 기능으로 정말 필요한 부분을 신중하게 선택해서 만드는 것이 중요하다.
기능 하나를 추가한다는 것은 경우의 수, 지수를 추가하는 것이기 때문에 지수폭발, 한마디로 천문학적 경우의 수를 낳는 것이며 테스트도 그만큼 많이 거쳐서 결과를 도출할 수 있게 된다. 따라서 신중하게 기능을 추가하는 것과, Start Small의 개념이 중요하고 강조했다.
3. 인터넷과 웹의 역사
인터넷과 웹은 같은 것일까? 인터넷과 웹은 다른 말이다.
출처 : 생활코딩, 웹애플리케이션 만들기 -웹의 역사벤다이어그램을 표시해본다면, 인터넷(도시)은 운영체제고, 웹(집 한 채)은 어플리케이션으로 볼 수 있다.
웹과 형제쯤되는 다른 기술로는 이메일과 FTP가 있으며, FTP파일을 전송할 때 사용하는 기술이다. 이메일은 웹을 통해 주고받는 지메일 같은 것이 아니라, 이전에 이메일과 이메일을 주고받기 위한 서비스, 그것이 바로 여기서 설명하는 이메일이다.
이외에도 인터넷상에 있는 수많은 기술들이 있고, 이 중에서 웹이 워낙 성공한 서비스이고 중요하기 때문에 인터넷과 웹을 동일하게 일컫기도 하는 것이다. 하지만 우린 웹을 공부하는 입장에서 인터넷과 웹을 구분해야한다.
출처 : 생활코딩, 웹애플리케이션 만들기 -웹의 역사1960년대와 1990년대에 굉장히 중요한 사건이 있었다. 1960년대에는 인터넷이 등장했으며, 19990년대에는 웹이 등장했다.
인터넷이라는 것은 전세계에서 데이터를 주고받을 수 있는 가장 큰 네트워크가 바로 인터넷으로 마치 도로와 같다. 그리고 웹이라는 것은 인터넷을 이용하여 HTML을 활영하여 컴퓨터와 컴퓨터가 주고받을 수 있도록 고안된게 바로 웹인 것이다. 비유하자면 대중교통 시스템이라 볼 수 있다.
팀 버너스리, 출처 : 구글 이미지그 와중에 결정적으로 공헌한 사람이 바로 팀버너스리, 웹을 창시한 사람이다. 유럽 입자물리 연구소에서 연구자와 연구자들이 엄청많은 정보를 주고받을 때, 효율적으로 정보를 주고받을 수 있는 시스템을 고안하다가 웹을 창시했고, 누구나 이 웹을 사용할 수 있도록, 퍼블릭 라이센스를 통해 웹을 완전히 공개했다. 이후 상업, 비상업적으로 이용 되면서 웹이 폭발적으로 인기를 끌며 지금까지 오게되었다고 한다.
웹브라우저의 카운터 파트너로서, 웹서버라는 소프트웨어를 만들었다. 각자 데이터를 주고받으면서 정보를 주고 받았다. 그 과정에서 통신규약인 http를 만들었고, 실제 정보를 담고있는, html이라는 언어로 만들어진 웹 페이지를 고안했다. 이것이 초창기의 웹, 웹의 본질을 의미한다.
웹이 폭발적으로 인기를 끌며, 훨씬 더 많은 사람들이 사용하면서 복잡해지게 되었다. 웹이라는 것이 대체 무엇인가라는 실체를 알기 어려운 시대까지 도달해서, 역사적인 맥락, 골격에 주목을 해야하는데 이에 웹브라우저와 웹서버와의 관계, 그리고 HTML이라는 웹페이지를 이루는 언어에 대해 주목하여야 한다.
4. 서버와 클라이언트
가장 중요한 내용이다. 나도 이 부분의 강의를 듣고 기존에 혼자 웹사이트를 만들면서 헷갈렸던 부분이 많이 해결됐다.
출처 : 생활코딩, 웹애플리케이션 만들기 - 서버와 클라이언트웹에 있어서, 서버와 클라이언트는 어떤 의미일까?
왼쪽은 보통의 노트북. 오른쪽은 일반적인 서버라 불리는 컴퓨터이다. 메커니즘은 거의 동일하다.
서버라는 컴퓨터는 안정성이 중요하기때문에, 부품이 더욱 신뢰도가 높은 것으로 이루어져있지만 우리가 사용하는 노트북도 훌륭한 서버이다.
웹브라우저(=웹클라이언트)가 설치돼있는 것을 클라이언트라 부르고, 웹서버가 설치되어있는 것이 서버다.
웹브라우저와 웹서버가 협력하여 웹이라는 것이 동작하게 되는 것이다.
예를들면, 웹브라우저가 설치되어있는 것에 일정 주소를 입력하면, 서버에 요청을하여 서버에 등록되어있는 웹페이지에 대한 문서를 읽어서 다시 클라이언트컴퓨터에 전송한다. 이를 즉 응답한다라고 한다. 요청하는 쪽이 클라이언트, 응답하는쪽이 서버이다.
즉, 클라이언트는 갑이고 고객이며 서버는 을이며 서빙하는 것 처럼, 서비스에 종사하는 것을 의미한다.
본 강의를 위한 준비물은 웹 브라우저와 웹서버가 필요했다. 웹브라우저는 우리에게 익숙한 크롬과 같은 것이지만 웹서버는 생소하다. 웹서버를 설치하는 방법도 운영체제별로 차근차근 알려주셨다. 공부의 목적으로, 이 강의에서는 한 대의 컴퓨터에 한대의 컴퓨터에 웹브라우저와 웹서버를 설치해서 같이 동작하게 하고, 웹브라우저에 주소를 치면 다른 곳에서 오는 것이아니라 같은 컴퓨터안의 웹서버에서 들고와서 일종의 원맨쇼를 하는 것과 같다. 공부를 하는데에는 지장이 없다.
웹서버 중 아파치는 절대강자다. 웹의 거의 시작과 함께 출발하여, 웹의 발전에 굉장히 큰 공헌을 하였다. 우리는 아파치를 설치할 것인데, 아파치를 직접 설치하는 것은 좀 까다롭다. 서버쪽에서 동작하는 프로그램은 설치의 편의성이 안좋은 편이다. 그래서 그런 어려움을 도와주는 솔루션이 있는데, 비트나미라는 것이 있다. 이는 아파치, PHP, My SQL와 같은 서버 소프트웨어를 한방에 설치할 수 있도록 도와주는 것이다. 운영체제마다 다른 설치방법이 있다.
5. 웹 서버 설치해보기 (맥)
나는 맥을 사용하므로 맥의 설치방법을 따라해보았다. 위 링크로 들어가면, 다른 운영체제별로도 다운로드가 가능하다.
MAMP : Mac, Apache, MySQL, PHP 의 앞자를 딴 것
설치를 시작한다. 다른 것은 우선 필요하지 않아 체크를 해제하고, 필수인 PhpMyAdmin만 체크하여 설치를 진행한다.
성공적으로 설치가되었다면 위와같은 페이지가 뜬다. 여기서, 127.0.0.1 = localhost 같은의미다. 그래서 http://localhost:8080/index.html로 수정해도 같다.
여기서 로컬호스트란? 이 웹브라우저가 설치되어있는 컴퓨터, 즉 웹서버를 가리키는 주소를 나타낸다. 이 웹브라우저가 설치되어있는 컴퓨터에는 즉 웹서버가 설치되어있는 상태다. (*맥은 :8080을 붙여야 한다.)
그리고 /index.html의 뜻은 웹브라우저가 웹서버한테 index.html을 보내달라고 요청하는 뜻이다.
그러면 웹서버는 이 컴퓨터에 있는 디렉토리 중에 htdocs라는 약속되어있는 디렉토리에 있는 index.html파일을 읽어서 웹브라우저에게 쏴준다. 그러면 웹브라우저는 index.html을 읽어서 페이지에 표시해주는 것이다.
실습 해보기
주소창에 http://localhost:8080/helloworld.html 을 입력했을 경우, 처음에는 에러메세지가 나온다.
이는 위 사진과 같이, htdocs 폴더에 helloworld.html이 없기 때문이다. 위 경로로 가서 htdocs에 helloworld.html을 만들어주도록 하자.
맥의 경우 기본프로그램인 textedit 으로 들어가서, 포멧은 Make Plain Text로 변경해주고, Hello World 를 입력해본다.
그리고 다시 htdocs에 저장해주고, 주소창에 http://localhost:8080/helloworld.html 을 입력하면?
Hello world 메세지가 나오는 것을 확인할 수 있다.
웹브라우저와 웹서버의 작동 원리
출처 : 생활코딩, 웹에플리케이션 만들기 - 웹서버 설치 (맥)예를들어, http://opentutorials.org/index.html을 웹브라우저 주소창에 입력하면 웹브라우저는 opentutorials.org 라는 웹서버의 htdocs에서 index.html을 요청하는 것이다.
그러면 웹서버가 응답하여 웹브라우저에 index.html을 전송하고, 이 화면이 웹브라우저 페이지에 뜨는 구조인 것이다.
htdocs(=document root)라는 것은 문서의 최상위디렉토리다.
즉, 웹서버가 문서를 찾는 최상위 디렉토리를 의미한다. 물론, 설정을 바꿔서 다른 위치로 변경은 가능하다.
지금 실습에서는, 하나의 컴퓨터 안에서 진행했지만 나중에 다른 컴퓨터에 웹서버를 갖추게 되면 위와같은 사진의 구조가 되는 것이다.
이 과정은 웹 개발에 있어서 필수적으로 알아야되는 사항이 아닐지라도, 이런 이해를 통해 여러가지 상황에서 능동적으로 대처할 수 있는 힘이 생길 수 있다고 한다.
이전에 기초 지식이 없이 부딪혔을 때는 서버가 무엇인지, 그저 주소를 갖다 붙이고, FTP를 이용하는 목적도 몰랐었는데 기초를 공부하니 이제 어떻게 웹이 돌아가는지를 조금은 알 수 있게됐다. 단순히 디자이너로서 현재 있는 포트폴리오 템플릿만을 이용하기보다는, 기초를 알고 내가 직접 자유자재로 다룰 수 있어야 워드프레스를 이용하면서도 선택권이 많아질 수 있다. 앞으로도 웹사이트를, 포트폴리오를 만드는 모든 기초 지식을 배워가며 함께 공유하고자 한다.
