안녕하세요. 타임투데브 운영자 강창훈입니다.

웹사이트 및 웹개발 기술은  ICT(정보통신기술) 정보 서비스분야에서는 핵심기술이자 필수 기술중에 하나입니다.
여러분들도 모두 아시다시피 작게는 개인 홈페이지에서 글로벌 기업 홈페이지까지 그리고 각종 기업용 시스템들인 ERP,CRM,인터넷뱅킹,쇼핑몰등
이루 말할수 없을정도로  많은 비지니스들이 웹개발기술로 구현되어있죠.

혹시 이것도 아셨나요?
여러분이 매일 사용하고 계시는 스마트폰앱!
많은 앱프로그램에서 사용되는  데이터 또한  Open API란 웹개발기술로 개발되어  데이터가 제공되어지고있습니다.
데이터 처리뿐만 아니라 앱 화면 개발도 전통적으로 사용되는 네이티브앱 개발방식이 있는반면에  앱의 껍데기만 네이티브기술로 개발하고 HTML과 하이브리드앱 프레임워크(폰갭(코도바))를 통해 개발이 이루어지는 하이브리드앱 개발방식도 요즘은 유지보수.배포의 편리성으로 인해 많이 사용되고 있습니다.

아직은 위와같은  기술용어들이 익숙치 않으시겠지만 앞으로는 자주 접하실테고 오프라인 강의에서 더 자세히  설명드릴예정이오니 미리 걱정은 하지마세요.

이처럼 웹사이트 및 웹기반 개발 기술은 인터넷 중심 세상에서 정보통신기술 기반 서비스 개발의 핵심기술이자 필수기술임을 인지해주시고
지금부터 웹사이트 개발에 대한  전반적인 과정을 차근차근 알아보도록 하겠습니다.
우리나라 정보통신기술(ICT= Information Communication Technology) 서비스 분야는 아래와 같이 크게 3가지 종류의 서비스 시장으로 나뉘어져 있습니다.

1.웹에이젼시 서비스 분야( Web Agency)
-디자인 및 홈페이지.앱개발 중심의 웹사이트 개발 및 서비스 시장

2.시스템 통합 서비스 분야(SI = System Integration)
-데이터 및 비지니스 와 개발인력 중심의 각종 시스템 개발 및 서비스 시장(공공.기업.의료.금융...)

3.솔루션 서비스 분야(Solution)
-특정 비지니스 중심의 특화된 솔루션 개발 및 서비스분야

상기 서비스 분야중 주를 이루고 있는 웹에이전시 분야 및 시스템 통합 분야에서 사용되는 웹사이트 개발 절차를 한번 알아 보겠습니다.
 

1.웹에이젼시 분야 웹사이트 개발절차

일반적인 중.소규모 웹사이트 개발절차는 사이트기획 -> 디자인 -> HTML퍼블리싱 -> 개발(프론트엔드 또는 서버)및 테스트  ->서비스(배포) 과정을 통해
하나의 웹사이트가 만들어지고 서비스되어집니다.

상기 웹에이전시  웹사이트 개발절차는 UX중심의 웹페이지와 소규모 데이터를 처리하는 디자인 중심의 홈페이지(기업용,개인용) 정도를 개발할때 사용하는 절차이며
기업용시스템(ERP,CRM,쇼핑몰)등을 개발할때는 용어와 절차들이 다소 다르게 사용됩니다.

2.SI(시스템통합) 분야 웹 시스템 개발절차

시스템통합 서비스분야는 일명 SI시장이라고 말하며 기업.공공시장에서 필요로 하는 대량의 데이터를 주로 체계적으로 관리하기위한 각종 정보관리시스템을 웹 기반 또는 다양한 종류의 기술환경을 적용해 개발서비스합니다.

이처럼 웹사이트는 규모가  작다면 작고 크다면 클수 있기때문에 국내 ICT서비스 시장은 크게 디자인중심의(UI/UX) 웹사이트 개발시장과
데이터처리 중심의 개발시장으로 크게 나뉘어져 있습니다.

디자인 중심의 시장은 웹에이전시라는 대형 에이전시 회사가 주도하고 있으며 데이터중심 시장은 대기업 중심의 SI(시스템통합)업체들을의 주도로 개발 및 서비스 되어지고 있습니다.

ㅁ국내 대형 웹에이전시 업체 : 이모션,플립커뮤니케이션,PXD 등등
ㅁ국내 대기업 SI업체 : 삼성SDS,LG CNS,SK C&C 등등

이외에도 특정 분야의 솔루션 및 서비스를을 개발. 서비스하는 회사로는 안랩,알툴즈만드는 이스트소프트,기업용 미들웨어개발하는 티맥스등도 있고 게임업체인 넥슨.소셜쇼핑 쿠팡.티몬등으도 있으며 
네이버/다음처럼 포탈서비스 업체도 있습니다.

우리는 일단 작은규모의 웹사이트,데이터가 적고 디자인 및 정적인 컨텐츠(HTML) 중심의 웹사이트를 먼저 개발할것이기 때문에 기본적인 웹에이전시 분야 웹사이트 개발절차 기반으로 실전 프로젝트를
진행할 예정이므로 에이전시 분야 개발절차를 좀 더자세히 알아보도록 하겠습니다.

1.기획단계
-고객사 또는 사용자의 요구사항을 정리하여 화면구성/메뉴구성/어떤 컨텐츠를 어떤방식으로 서비스 할지 기획하는 단계입니다.
-기획단계에서 사이트의 구성 및 내용이 정해지죠.
-기획단계에서 모든 기능과 절차/방식이 정해지기에 웹에이전시 영역에서는 기획자가 PM(프로젝트매니저) 역할을 일반적으로수행합니다.
-담당자: 기획자

2.디자인단계
-기획단계에서 만들어진 기획서에 있는 화면설계서를 기본으로 디자이너의 색체,이미지 감각을 이용 그래픽디자인을 합니다.
-일반적으로 몇개의 디자인시안을 준비하는 프로토타이핑 과정을 걸쳐 고객 또는 내부에서 확인받는 절차를 걸칩니다.
-사실 직접 사용자 눈에 보여지는 영역이라 개발과정에서 기획 다음으로 중요하다고 볼수 있죠.
-담당자: 웹디자이너,그래픽디자이너

3.퍼블리싱단계
-디자인단계에서 만들어진 그래픽을 이용 웹사이트에서 서비스할 웹페이지의 기초 코드(HTML,CSS)를 만들어내는 과정입니다.
-이미지 그래픽이 실제 코드(HTML&CSS)로 변환되는 첫번째 단계이자 코딩(코드를 만드는일)이 시작되는 첫단계입니다.
-퍼블리싱 단계의 중요업무는 HTML,CSS를 표준에 맞게 코딩하는 웹표준을 준수하여 결과물을 만들어내는것과 장애인,인터넷 사용 취약계층들을 고려한 웹접근성을 준수하여 코딩하는것입니다.
-또한 스마트폰이 대중화되면서 요즘은 웹페이지를 스마트폰뿐만 아니라 다양한 디바이스(PC모니터,노트북모니터,태블릿모니터,스마트폰모니터,스마트와치디스플레이,스마트TV화면)의 화면을 통해 보기때문에 퍼블리싱 단계에서 주요 디바이스의 해상도를 지원해주기위한 반응형웹(Responsive Web)기술을 적용하여 코딩하는것도 요즘은 핫한 트렌드이죠.
-담당자: 퍼블리셔

4.개발단계
-퍼블리싱 단계에서 만들어진 코드(HTML&CSS)는 대부분 정적 컨텐츠를 보여주기 위한 코드입니다.
-정적 컨텐츠란 컨텐츠를 실제 표현하는 코드들이 처음 작업한 이후 변경이 없거나 변경내용이 적은 웹페이지 또는 컨텐츠를 말합니다.
회사소개,조직도 페이지 처럼 한번 페이지를 만들면 왠만해선 내용을 바꾸지 않고 바꾸더라도 횟수가 적기 때문에 직접초기 소스코드(HTML)내용을 수정하여 재배포하면 되는 웹페이지 또는 컨텐츠를 말합니다.

-그럼 동적 컨텐츠도 있겠지요?.
동적컨텐츠는 화면을 구성하는 내용,즉 컨텐츠가 동적으로 생성되거나 변경 되는 웹페이지 또는 컨텐츠를 말합니다.
주로 DB의 데이터를 이용해 화면(html코드)을 동적으로 만드는 웹프로그래밍 기술이 적용된 쇼핑몰 페이지나 각종 데이터 중심의 화면 및 웹페이지들이 이에 속합니다.
-동적컨텐츠 화면은 주요내용이나 코드가 동적으로 생성되나 기획서에 나와있는 동적 컨텐츠의 결과물을 기준으로 동적 컨텐츠도 (HTML.CSS) 퍼블리싱작업이 사전에 진행됩니다.

-개발단계는 퍼블리싱 단계에서 만들어진 정적 컨텐츠와 동적컨텐츠 코드(HTML&CSS)를 실제 개발서비스할 기술환경(ASP.NET MVC,JSP,PHP,PHYTHON ETC)에
맞게 코드(HTML&CSS)를 재구성하고 페이지의 공통영역에 대한 코드의 재사용을 위한 인클루드 기술적용,동적 컨텐츠 제공을 위한 웹프로그래밍 작업, 데이터 기반의 DATABASE 설계 및 DB 프로그램밍 작업
(Create,Read,Update,Delete)등을 진행합니다.
-담당자: 백엔드개발자, 프론트엔드개발자

5.서비스(배포)
-개발이 완료되면 테스트 과정을 거친 후 이상이 없으면 실제 서비스환경인 서버에 결과물을 배포하는 작업을 합니다.
-주로 개발자 컴퓨터(pc)에서 개발된 코드를 실제 서비스환경인 서버 컴퓨터로 옮기고  개발소스를 이용해 웹사이트를 웹서버란곳에 생성 후
도메인을 연결하고 DATABASE서버와도 연결하는 작업을 진행하죠.
-주로 백엔드 개발자가 진행하지만 분업화가 잘되어있는 대기업에서는 데브옵스그룹(개발된 시스템의 운영관리부서) 이나 시스템엔지니어(SE-서버관리자)가 담당합니다.
-담당자: 시스템엔지지어,서버관리자,DB관리자(DBA)

시스템 통합분야 개발절차는 이후 데이터 모델링 강의에서 다루는 정보관리시스템 개발절차에서 좀더 구체적으로 다룹니다.
http://mixedcode.com/Article/Index?aidx=1074

상기와 같이 웹사이트 하나를 개발,서비스하기 위해서는 여러 전문화된 단계를 거치고 전문인력이 필요하기에 쉽지 않아보이지만 기술에 대한 진입장벽이 낮아지고 쉽고 강력한 개발툴과
다양한 형태의 개발관련 정보제공 서비스들이 제공되고 있기 때문에  사실은 그 전체 과정을 이해한다면 그리 어려운것만도 아닙니다.


당장 전문가가 되실것이 아니라면 전과정을 자세히  아실필요는 없지만 반대로 전문가가 되보실거면 여러단계중 하나의 분야를, 그분야의 다양한 기술들을 체계적이고 전문적으로 익히셔야겠지요.
그래서 금번 교육과정은 전체 개발의 산을 볼수 있는 과정으로 준비했으며 처음 개발을 접하는분들에게는 많은 도움이 되실거라 기대해봅니다.

지금까지 개발절차를 한번 살펴보았구요..
혹여 질문있으시면 본글의 댓글에 올려주시면 함께 공유토록 하겠습니다.

지금까지 개발에 촛점을 맞추어 결과물을 만들어내는 과정을 말씀드렸다면 결과물을 만드는 과정 이전과 이후에 눈에 보이지 않는 다양한 서비스 준비 절차들이 존재합니다.
개발이 완료되었다고 서비스를 바로 진행할수 있는것은 절대 아닙니다.
제아무리 도메인(mixedcode.com)을 통해 웹사이트가 서비스 되었더라도 누가 그서비스의 존재를 알고 찾아와서 그서비스를 이용할수 있고 그 서비스의  사용자가 많아질수 있을까요?

ㅁ개발이전 준비사항들
-웹사이트가 집이라면 집의주소를 알아야 모르는 사람들이 찾아오고,물건이 배달되겠죠?
-즉, 도메인이라는 웹사이트의 주소를 사전에 준비하셔야합니다.( mixedcode.com, naver.com 처럼요..)
-제공하는 웹사이트에 어울리는 이름을 작명하셔야하고 그이름은 인터넷세상에서는 유니크해야합니다.
인터넷상에서는 동일한 이름(도메인)은 존재할수 없습니다. 컴퓨터들이 그리 똑똑한것만은 아니여서 여러개 동일이름이 존재하면 집을 찾아갈수 없습니다.
-따라서 사용가능한 도메인을 고민해서 동일도메인이 없는지 검색후 유니크하면 도메인을 돈을주고 구매하여 서비스준비를 합니다.
-도메인 구매방법 및 절차는 다음강의에서 말씀드립니다.

ㅁ개발이후 처리사항들
-개발된 소스를 서비스할 환경(서버컴퓨터)이 필요합니다.
-개발된 소스는 일반적으로 PC/노트북등 개인용 단말기에서는 서비스가 불가하며 24간 서비스가 가능한 서버컴퓨터라는 별도의 컴퓨터 자원을 통해서 서비스됩니다.
-따라서 서비스환경(웹호스팅,서버호스팅,클라우드,자체서버컴퓨터)을 준비하셔야합니다.
-서비스환경에 웹사이트가 구축되면 준비해주신 도메인을 세팅하면 기본서비스가 준비가 끝납니다.
-이젠 사용자가 접속하길 기다리거나 직접 사용자에게 알릴수 있는 다양한 방법을 찾습니다.
대표적인 방식은 포탈에 사이트도메인을 등록하거나 포털(네이버,다음)이나 검색엔진(구글,빙)의 검색엔진 로봇이
자동으로 사이트정보를 검색해가서 포털이나 검색사이트에 자동으로 업데이트될수있도록 웹사이트 소스에 대해 검색엔진최적화(SEO)작업을 추가로진행해야합니다.
-위 작업이 끝나면 사용자들이 하나둘 서비스에접속하겠죠? 회원가입도 하고 물건도 사고...비지니스가 어느정도 운영되기 시작합니다.
이때 사용자 맞춤형 서비스가 필요합니다. 즉, 메일을 통한 메일링서비스입니다.
회원가입후 환영메일이나 암호찾을때 임시암호 수신메일,관심주제에대한 안내메일이나 주문/발송 확인메일등 모이런 서비스 관련된 각종 메일을 사용자에게 보내는 메일링 서비스도 개발해야 할것입니다.

지금까지 웹사이트의 전체 개발 및 서비스 사전 준비과정을 쭈욱 짚어보았는데.요..

숨넘어가시나요? 겁나시나요? 괜찮으시죠?  이모든것을 5회의 교육과정을 통해 여러분은 신기하게도 해내실겁니다.
문제는 시간과 다소의 노력이라 느껴지는데요.

매주마다 진행되는 오프강의와 일주일간의 Term을 이용한다면 충분히 가능하세요. 막히시거나 궁금하시면 아시죠?
여러분에게는 믹스드코드 댓글이 있습니다.
스마트폰을 통해 ,PC를 통해,태블릿을통해 언제 어디서나 질문을 올려주시면 감사하겠습니다.

------------------------------------------------------

대표이미지소개 :  존경하옵는 데이터분석 전문 컨설팅/교육기업 DPLUS  정원혁 대표님의 따님이 만든 귤 작품
촬영스토리 : 몇년전 따님이 귤을 이용해 만든 작품?인데 너무귀여워 제가  다운로드 보관하고 있다가 이번에 올려봐요.
출처 : 정원혁 대표님의 페북
https://www.facebook.com/myLoveRebecca