페이지

Posts List

2014년 8월 23일 토요일

자바 개발에 대한 전반적인 내용 강좌

웹기획의 기본 - 웹사이트 구축을 위한 조직 형태와 역할, 2011

 http://bahns.net/2642174
두번째 강좌는 웹과 관련한 조직 형태에 관한 내용입니다.
이미 다양한 조직 경험을 가지신 분들 보다는 처음 기획을 시작하시거나 한 회사에 계속 계시는 분들께 도움이 될 수 있을 것 같습니다. 전반적인 설명을 하다보니 어려운 용어들이 많이 있는데, 이해가 어려우면 대략 넘기시면 되겠습니다. 책에서는 용어들이 이후에 차근차근 설명이 됩니다.
다음 강좌에서는 조직 규모에 따른 기획자의 역할에 대해서 이야기 합니다.

오래가는 웹기획 & UX 디자인

2) 웹기획의 기본 - 웹사이트 구축을 위한 조직 형태와 역할

웹사이트를 구축하고 운영하기 위해서는 아래와 같은 조직들이 필요하다. 조직이 작은 경우 한 두 명의 담당자가 여러 가지 업무를 동시에 수행하기도 하고, 조직이 크고 인원이 많은 경우는 각각의 조직들이 별도의 팀으로 구성되거나 하나의 부서 아래에 여러 팀으로 구성되기도 한다. 각각의 조직과 그 역할에 대해서 간단히 살펴본다.
 

그림 1-3 웹사이트 구축을 위한 조직 형태
 

사업 기획

사업 기획 조직은 장단기 사업 계획을 세우고 진행하며, 그 진행상황을 점검하고 관리하는 조직이다. 회사의 매출에 관한 총체적인 관리를 사업 기획 조직에서 하게 되며, 매출 목표를 달성하기 위한 여러 압박을 받을 수 있다. 영업 조직이 중요한 역할을 하는 회사일 경우 영업 조직과 사업 기획 조직은 긴밀한 연관 관계를 가지게 된다.
사업 기획 조직은 회사의 사업 목표를 만들고, 수익 모델과 서비스 모델을 만든다. 업계의 트렌드와 경쟁 상황을 분석하고 그 사이에서 어떤 식으로 자사의 서비스나 제품을 성공적으로 판매할 것인지 고민한다. 매출을 채널별로 분석하고 자금을 투입해서 활성화 할 부분과 아닌 부분을 찾아내서 적절한 초치를 취한다. 비슷한 형태로는 전략 기획, 서비스 기획이라는 이름의 조직을 볼 수 있는데 모두 비슷한 일을 하는 것으로 생각할 수 있다.

 

마케팅 기획, 마케팅 실행

마케팅 조직은 회사의 제품과 서비스 현황을 파악, 분석하고 그것의 판매를 촉진하는 마케팅과 광고 및 홍보 활동을 담당한다. 마케팅, 광고, 홍보는 별도의 조직으로 나눠지기도 하는데, 그럴 경우 마케팅은 사용자, 트래픽, 매출에 관한 현황을 파악하고 관리하며, 광고는 온/오프라인 광고 제작, 홍보는 언론 관련 보도자료 작성 및 채널 관리를 하는 식으로 역할이 나눠질 수 있다.
마케팅 조직의 역할은 여러 부분이 사업 기획 조직과 겹치는 경향이 있다. 사용자 조사, 사이트 통계의 분석과 관리, 상품 구성 및 가격 결정, 매출 관리 등은 마케팅과 사업 기획에서 필요에 따라 비슷한 업무를 별도로 또는 함께 수행하게 되는 것들이다. 사내의 조직 구성과 내부적인 사정에 따라 각 조직의 세부 역할과 범위가 결정된다.
웹사이트와 관련해서 마케팅 기획에서는 사이트의 구성에 따라 방문자를 회원으로, 회원을 구매 고객으로 전환하는 전환율을 어떻게 높일 수 있을지 고민한다. 또한 오랫동안 방문과 구매가 없는 휴면 고객을 어떻게 활동 고객으로 만들 수 있을지, 장바구니에 담긴 제품에 대한 결제율을 높일 방법이 없을지 등을 항상 연구한다.
개발 이후 서비스 오픈 시점의 마케팅 실행 단계에서는 서비스 활성화를 위한 다각적인 마케팅 캠페인을 진행한다. 미리 의도한 방향으로 회사 이미지(Corporate Identity)와 브랜드 이미지(Brand Identity)를 만들고 서비스에 대한 일관된 메시지를 온/오프라인의 다양한 채널을 통해 고객에게 알린다.

 

사이트 기획

웹기획자가 실질적으로 수행하는 가장 핵심적인 업무는 이 사이트 기획 업무이다. 이 책의 대부분의 내용은 사이트 기획에 관한 내용으로 채워져 있다. 웹사이트의 논리적인 구조와 뼈대를 만들고 거기 살을 붙여 실제 사이트를 구축할 수 있는 전체 설계도를 만드는 것이 웹기획자의 역할이다.
사이트 기획을 할 때는 콘텐트를 이해하기 쉽고, 찾기 쉬운 구조로 만드는 인포메이션 아키텍처 및 내비게이션 설계, 그리고 사용자가 혼란을 느끼지 않고 직관적으로 사이트를 이용할 수 있게 하는 유저빌리티 설계가 중요하다. 또한 작성된 콘텐트의 품질을 높이는 것도 중요한데, 이를 위해서 웹 상의 글쓰기를 담당하고 작성된 콘텐트의 검수를 진행하는 전문 인력을 따로 두기도 한다.
사이트 기획시 고려해야 할 점은, 기획을 할 때 항상 상위 단계 기획의 결과를 고민하고 반영해야 한다는 사실이다. 사업 목표와 마케팅 방향이 설정되지 않고 설계되는 사이트는 목표가 없고 가야 할 방향을 모르는 혼란스런 사이트가 될 가능성이 커진다. 명확한 사업 목표와 마케팅에 대한 전략적 방향이 설정되어 있다면 사이트의 큰 틀부터 세세한 콘텐트까지 한가지 방향을 바라보며 설계될 수 있고, 그런 일관성이 사용자를 설득하고 그들의 행동을 이끌어 내는 힘이 될 수 있다.
사용자 조사, 벤치마킹 등의 리서치 단계에서 사업 기획, 마케팅 기획, 사이트 기획에서 비슷한 업무를 수행하긴 하지만 실제로는 원하는 점이 다른 경우가 많다. 사용자 조사의 경우, 마케팅적으로 판매 채널의 관점에서 나눈 그룹과 웹 사이트를 구축을 위해서 만드는 사이트 이용 패턴별 사용자 그룹은 차이가 있게 마련이다. 필요할 경우 사이트 구축을 위한 이런 조사들을 설계 전에 수행해야 한다.

 

프로젝트 관리

프로젝트 관리를 담당하는 사람을 프로젝트 매니저(Project Manager)라고 하며 보통 간단하게 PM 또는 프로젝트 PM이라고 부르기도 한다. 프로젝트 매니저는 프로젝트의 진행상황을 점검하고 보고하며, 필요한 기간과 인력을 산정하고, 비용을 책정하고 집행하는 일을 한다. 또한, 변경되는 프로젝트 요소들에 대한 관리를 하고 진행 상황에 따라 일정과 인력을 조정하며, 프로젝트가 실패할 수 있는 위험 요소들을 점검한다.
프로젝트 매니저는 사실 가장 논란이 많고 조직에 따라 역할에 차이가 많은 위치이다. 프로젝트 매니저에게는 일정 부분의 권한과 책임이 주어지게 되는데, 그 정도에 따라 프로젝트의 진행 형태가 결정되게 된다. 많은 경우 프로젝트 매니저는 웹기획에서 개발 완료 후 보고까지의 사이트 구축 과정을 관리하는 관리자를 이야기한다. 이 경우 전략 기획과 마케팅 등의 과정은 관리 범위에서 빠진다.
좀 더 넓은 의미의 프로젝트 매니저는 해당 서비스의 전략기획 단계에서 출시 후 마케팅까지 전체를 담당하고 관리하는 역할을 한다. 프로젝트 매니저 역할을 더 넓게 생각할 경우, 기획조직이 아닌 사업조직에서 프로젝트에 관한 총괄 매니저를 맡는 경우를 이야기 할 수 있다. 이 경우는 매출과 마케팅 등을 포함한 제품 전체에 대한 책임과 권한을 사업부의 프로젝트 매니저에게 주게 되며, 이럴 때 프로젝트 매니저를 프로덕트 매니저(Product Manager)라고도 이야기 할 수 있다. 이와 같이 프로젝트의 범위를 어디서 어디까지로 정하는지에 따라 프로젝트 매니저의 역할도 달라진다.

 

디자인

디자인 조직은 사이트 기획 단계에서 만들어진 기획서에 맞게 화면 디자인을 진행한다. 신규 사이트를 디자인 한다고 가정했을 때 디자인 작업은 시안 작성 -> 시안 검토 및 확정 -> 스타일 가이드 작성 -> 세부 페이지 디자인의 순서로 진행된다. 시안 작성시 우선 사이트를 위한 다수개의 시안을 작성하고, 경영진을 비롯한 관련 주요 멤버의 의견을 취합하여 수정 시안을 작성하고, 최종적으로 그 중 하나를 확정하게 된다.
디자인 작업을 위해서는 전체적인 사이트 디자인의 틀을 정의하는 스타일 가이드가 필요한데, 많은 수의 디자이너가 작업하는 대형 사이트와 외부의 디자인 인력을 사용하는 사이트, 그리고 콘텐트 공급자(CP: Content Provider)와의 작업이 많은 사이트는 디자인의 일관성을 유지하기 위해서 상세한 수준의 스타일 가이드를 만들 필요가 있다. 스타일 가이드는 시각적인 디자인 요소의 형태와 크기에 대해서만 간단히 정의할 수도 있지만, 최근에는 표준적인 html 코드 작성법과 css 사용법, 웹 접근성 준수 방안까지 모두 포함해서 가이드를 제공할 필요성이 생기고 있다. 해당 개념들은 이후 장에서 소개될 예정인데, 스타일 가이드에 대한 상세한 소개는 이 책의 범위를 벗어난 주제이므로 관련 관련 사이트[1]를 참고하여 내용을 파악하기 바란다.
최근에는 점차 디자인과 개발이 경계가 약해지는 추세에 있다. 이것은 단순하고 정적인 컨텐트 중심의 웹사이트가, 새로운 기술(Ajax, 플래시 등)의 도움을 받아 더 사용하기 편리한 형태로 발전하는 추세와 맞물려 있다. 웹 디자이너가 수행하는 웹 코딩은 지금까지 대부분 html과 css 코딩에 한정되어 있었지만, 최근에는 웹 표준과 웹 접근성을 고려한 코딩, 그리고 자바스크립트 코딩과 플래시 애플리케이션의 동작 제어에 필요한 코딩으로까지 영역이 확대되고 있다. 이러한 코딩은 기존에 개발자들이 수행하던 업무와 비슷하며, 이런 작업들을 전문적으로 수행하는 전문 인력이 점차 늘어가고 있다.
변화에 대한 빠르고 점진적인 적용을 강조하는 애자일 등의 개발 방법론에서는 설계를 완료한 후 디자인을 진행하지 않고, 대략적인 설계를 통해 프로토타입을 우선 만들고, 그것으로 구현 가능성 등을 점검한다. 이런 개발 과정에서 디자이너의 역할은 기존의 개발 방법과 차이가 있을 수 있다. 기존의 개발 방법에서는 기획, 디자인, 개발을 별개의 프로세스로 보고 전혀 다른 툴을 이용하여 작업을 해왔지만, 최근에는 기획, 디자인, 개발이 같은 툴을 사용하여 빠른 작업을 가능하게 하려는 시도가 진행되고 있다.
[1] http://html.nhndesign.com/ - NHN의 웹 표준화 가이드
http://ui.daum.net/ - 다음의 Frontend 개발 가이드
http://webstyleguide.com/ - 스타일 가이드 분야의 책 “Web Style Guide”의 온라인 버전

 

개발

개발 조직은 완료된 웹 기획 문서와 디자인 결과물을 이용하여 사이트를 개발한다. 개발 조직에서는 어떤 기술을 이용하여 웹 개발을 진행할 것인지에 대한 기술 기획을 하고, 시스템 구성과 실제 개발을 담당한다. 최근에는 사용할 수 있는 다양한 기술이 있으므로, 어떤 기술을 사용할지 여러 가지 요소를 고려해서 선택해야 한다. 이 때 기술의 선택이 기획과 디자인 전반에 영향을 미칠 수 있으므로, 중요한 기술적인 결정을 하기 전에는 개발자와 기획자, 디자이너가 의견을 함께 모아야 한다.
예전의 정적인 웹 사이트의 개발은 기획자가 전달하는 스토리 보드의 내용을 개발자가 구현하면서 데이터베이스에 주요 데이터에 대한 입출력 작업을 완료하면 대부분의 사이트 개발이 완료되는 형태였다. 하지만 이제 인터넷에서 좀 더 다양하고 풍부한 사용자 경험을 제공할 수 있게 되었고, 사용자의 요구에 맞춰 이에 대한 구현을 개발자가 해야 하는 상황이다. 정적인 웹 사이트 개발에서 동적인 형태의 웹 애플리케이션 개발로 개발의 방향이 변화하고 있다.
최근의 개발 방법론에서 요구하는 빠르고 점진적인 개발과 테스트를 지원하기 위해서 개발자가 기획자, 디자이너와 긴밀하게 작업해야 할 필요성이 커지고 있다. 기술이 복잡해지면서 본격적인 기획 이전에 먼저 기술적인 구현 가능성을 파악해야 할 경우도 늘어나고 있으며, 그럴 경우 간단한 것부터 복잡한 형태까지 프로토타입 개발을 기획자와 진행하기도 한다.
개발자도 사용자를 알아야 하는 시점이 왔다. 개발자가 더 이상 개발 용이성과 효율성에만 가치를 두는 프로그래밍을 해서는 안되는 상황이 오고 있다. 개발자가 기획자, 디자이너와 함께 직접 사이트의 세부적인 모습을 테스트하고 만드는 경우가 늘어남에 따라, 개발자가 불편하게 구현한 프로토타입이 실제 서비스가 되고 그것이 서비스 전체의 품질을 떨어뜨릴 수도 있기 때문이다. 개발자도 항상 사용자 편의를 우선해서 개발을 진행한다는 자세를 가져야 하며, 기획자, 디자이너와 협력하여 사용자 중심의 접근에 익숙해져야 한다.

 

테스트

테스트에 관한 조직은 일반적으로 QA(Quality Assurance) 조직, 품질보증 조직 등이며, 개발된 사이트나 제품의 테스트와 품질 개선을 담당한다. 개발된 제품이나 서비스를 테스트해서 어떤 문제가 있는지 파악하고, 그것들을 체계적으로 정리하고 버전 별로 관리하며, 출시 시점에 최종 사이트 출시가 가능한지 여부를 판단하여 보고한다.
QA 조직은 제품의 복잡도가 높으면 높을수록, 배포된 제품의 수정이 어려우면 어려울수록 중요성이 커지게 된다. 그런 측면에서 수정이 쉬운 웹사이트의 경우 별도의 QA조직을 두지 않고 기획자와 개발자, 그 외의 관련자들이 테스트 후 서비스를 오픈 하고, 문제점은 이후에 수정하는 형태로 테스트가 진행되기도 한다. 하지만 복잡하고 중요한 업무를 수행하는 금융 관련, 의료 관련 애플리케이션에는 QA절차가 꼭 필요하며, 동적인 사용자 인터페이스를 제공하는 웹 애플리케이션에서도 오류 발생 가능성이 커지므로 QA 절차의 필요성이 높아지게 된다.
대형 사이트의 경우는 부하 테스트(스트레스 테스트)를 별도로 하기도 한다. 시스템에 일시에 많은 사용자가 몰릴 경우를 가정하여 어떤 문제가 생기는지 테스트 하는 것이 부하 테스트이며, 테스트를 자동화 하는 전문 프로그램을 사용해서 일시에 많은 부하를 주는 형태로 테스트를 진행한다.

 

사이트 운영

사이트 운영 조직은 오픈된 사이트를 문제없이 가동하고 고객의 불만사항을 수집, 관리하고, 수집된 사항을 다른 조직과 공유하는 역할을 한다.
일반 고객의 참여가 많은 서비스에서는 별도의 사이트 운영 조직이 존재한다. 이 조직에서는 게시판이나 채팅 등의 사용자 참여 서비스 사용을 점검하고, 규칙을 어긴 사용자나 게시물에 대해서 제재를 가한다. 상거래 사이트의 경우 사용자의 주문과 문의 사항들에 대한 처리를 이 조직에서 담당한다.
고객의 목소리를 듣는 조직으로는 고객 지원 부서와 콜 센터가 있을 수 있다. 고객 지원을 위해서 인터넷 상담과 메일, 전화 상담 등의 여러 가지 상담 채널이 있을 수 있는데, 각각의 채널을 계획하고 관리하는 것이 고객 지원 부서의 역할이다. 이렇게 수집된 고객의 목소리는 기획 조직으로 전달되어 고객의 불편을 최소화 할 수 있는 형태로 서비스를 개선하는데 사용된다.
시스템 운영 조직도 사이트 운영을 위해서 필요하다. 각 서비스의 가동 상황을 항상 점검하고, 서비스 가동률과 장애율을 파악하여 장애를 최소화 하기 위한 시스템 차원의 초치를 취한다. 시스템 자원을 최대한 효율적으로 사용하면서 가동률을 높이고 혹시 모를 장애 상황에 대비하는 것이 시스템 운영팀의 역할이다.


웹 사이트는 소프트웨어일까?

웹 사이트는 소프트웨어일까?


1999년에 한국HCI연구회에 ‘웹 사이트 공학‘ 이란 제목의 칼럼을 올렸었고, 2005년도에 블로그에옮기면서 다시 생각을 한 적이 있었다.
그때의 내 논지는 웹 사이트를 소프트웨어가 아니라 미디어로 보고 주먹구구식으로 만들었기 때문에 라~아지 스케일의 웹 사이트는 엉망이 되어 간다는 것이었고,  이를 해결하기 위해서 전산학의 소프트웨공학에서 개발 방법론을 빌려 오자는 얘기를 했었다.
오늘 사내에서  스크럼이라는 애자일 방법론에 대한 강의를  들었다. 프랑스 사람이 쉬운 영어로 얘기를 해주었지만 수학  공식에서는 잘 이해를 하지는 못했다.
이 강의를 들으면서 문득 1999년도에 했던 생각이 다시 났다. 컴퓨터 기술로 만들어졌기 때문에 웹 사이트는 소프트웨어일까? 아니면 뉴미디어일까? 아니면 새로운 상거래 방법일까?
웹 사이트 개발(기획 부터 모든 것 다)의 책임자는 소프트웨어 개발자일까? 아니면 웹 기획자일까?
왜 소프트웨어 엔지니어들은 이렇게 개발방법론을  기획자들을 대상으로 아트를 하고 있을까? 제품의 오너가 웹 기획자이기 때문일까?
그럼 웹 기획자는 소프트웨어 공학이나 제품 개발 방법론에 대해서 얼마나 잘알까? 인터넷 서비스 기획자의 자격 조건은 있기는 한 것일까?
인터넷 웹 사이트 개발은 전산학의 소프트웨어 범위를 벗어 난다. 개발을 단순히 프로그램 언어로 컴퓨터 상에서 작동하도록 하는 것이 아니라면 말이다. 그 이유는 기존 소프트웨어 공학에서는  HCI나  마케팅, 비지니스 모델, 시장 논리가 없기 때문이다.  리서치와 기술, 시장으로 부터 아이디어를 얻고 컨셉을 만들고, 시장성을 보는 등의 과정과 컨텐츠 저작과 운영까지도 포함해야 한다. 소프트웨어는 알고리즘과 데이타이지만 전산쟁이들은 데이타는 다루지 않고 규칙만 다르기 때문에 컨텐트에 대한 저작과 운영이 포함되어야 한다.
인터넷 회사에서 보면 웹 기획자가 제품의 제품 관리자가 되고,  프로젝트 관리자가 되는 것 같다. 소프트웨어 엔지니어들은 기술 구현 안에서의 프로젝트만  관리한다.  내가 인터렉션 디자이너를 데리고 있었을 때에는 인터렉션 디자이너가 제품 개발의 전체 개발 일정을 관리했다. 인터렉션 디자이너는 누구에게 줄 어떤 제품을 만들고 그 내용이 무엇인지를 다루기 때문에 당연한 것이다. 그러나 이 또한 엔지니어는  인터렉션 디자이너가 정한 스펙을 구현하기 위한 구현 일정만 다루게 된다.
어째 요즘 추세가 그런것인지 아니면 인터넷이라서 그런 것인지는 모르겠지만 웹 사이트 개발에서 엔지니어는 웹 사이트를 만드는 것이 아니라 웹 사이트를 컴퓨터 기술로 구현만 하는 것 처럼 보인다.  그래서 그들이 하는 프로젝트 관리의 범주에는 사용자 니즈 조사가 없고 정해진 요구사항 스펙을 기술 스펙으로 바꾸고 그것을 구현해서 테스트 하는 것만 다루는 것 같다. 이런 것을 만들어 보면 어떨까?  제안을 해서 이런 것이 니네한테 필요하고 이렇게 만들어 주겠다고 하는 것들은 인터넷 웹 사이트 개발에서는 더 이상 소프트웨어 엔지니어들의 역할이 아닌걸까?
웹 사이트는 소프트웨어일까?
웹 사이트를 무엇으로 보느냐에 따라서 제품개발의 오너가 달라질 수도 있을 것 같다.  소프트웨어라면 소프트웨어 엔지니어가 제품 관리자가 되어야 할 것이다. 만약 비지니스나 쇼핑, 뉴스와 같은 도메인에 대한 지식과 경험이 더 중요하다면 그런  내용을 전문으로 하는 사람이 제품 오너가 될 것이다.
그러나 둘 다는 둘다를 다 잘하지 못한다.  기자 출신의 인터넷 뉴스 제품 관리자는 제품 전략이나 마케팅, 제품 개발 방법론, 기술, 사용자, UI에 대해서 전문가가 아니고,  엔지니어가 제품 관리자를 하면 비지니스, 도메인 업계, 경영, 시장,마케팅, UI, 사용자를 모를 것이다.
그러나 결과를 보면 인터넷 기업은 만드는 것 자체인 동사가 아니라 비지니스를 책임지는 명사 위주로 제품의 오너쉽을 주는 것 같다. 웹 사이트는 만드는 측면에서는 소프트웨어이지만 경영 측면에서는 비지니스 도메인 영역이다. 즉, 인터넷 뉴스, 인터넷 쇼핑이다.
결국 결론은 버킹~검. 세상은 혼자 할 수 있게 별로 없으니 전문가들이 잘 협업해서 만들어라~

웹 서비스 소프트웨어 개발 회사의 효율적인 조직 구조 및 관리

웹 서비스 소프트웨어 개발 회사의 효율적인 조직 구조 및 관리


지금까지 두 번의 글을 통하여 조직이 커지면서 생산성이 떨어지는 이유에 대하여 살펴보았다. 첫 번째 글에서는 생산성이 떨어지는 가장 큰 원인이 업무와 조직의 세분화라고 이야기했다. 두 번째 글에서는 이 같은 세분화가 어떠한 문제점을 가지고 있는지는 지난 글에서 다루었다.
그렇다면 소프트웨어 개발 회사는 어떤 형태의 조직 구조와 업무 형태를 가져야할까? 지금부터 내가 생각하는 웹 서비스 소프트웨어 개발 회사의 조직 구조 및 업무 형태에 대한 해결 방법을 제시해보도록 하겠다. 이 해결 방법은 지금까지 나의 경험을 바탕으로 이러한 방향으로 나아가는 것이 바람직하지 않겠느냐는 의견을 제시하는 것이다. 글을 읽으면서 내가 생각하는 방향이 가지는 문제점과 또 다른 대안에 대해서 많은 의견을 주면 좋겠다.

핵심 업무 중심으로 조직이 확대

모든 회사는 회사를 유지하는데 가장 핵심이라고 할 수 있는 업무가 있다. 웹 서비스 소프트웨어 개발 회사라면 회사의 중심에 서비스(또는 프로젝트)가 있을 것이다. 웹 서비스 개발 회사가 성장하면서 급격하게 조직이 커지는데 이 때 중심에 두어야 할 것은 서비스이며, 서비스를 중심으로 조직 구조가 확대된다.
서비스를 중심으로 조직을 확대하다 보면 각 서비스에서 공통적으로 발생하는 문제와 해결책이 빈번하게 발생한다. 이 때문에 업무의 효율화라는 명목과 효율적인 인력 관리를 통한 비용 절감이라는 명목으로 이 업무를 전담하기 위한 조직들이 서서히 등장하기 시작한다.
이 시점이 조직이 커지면서 조직을 재편할 때 가장 중요한 시점이라고 생각한다. 이 시점에 공통 업무를 위한 새로운 조직을 만드는 것에 신중해야 한다. 한번 만들어진 조직을 없애고 새로 재편하기 위해서는 조직을 만들 때보다 몇 배의 비용과 고통이 따르기 때문이다. 이 시점에 조직을 각 업무별로 세분화하고, 공통 작업 단위로 세분화할 경우 발생하는 문제점에 대해서는 앞에서 살펴봤다.
그렇다면 어떤 방법이 가능할까? 나의 관점으로 봤을 때 하나의 서비스를 담당하는 조직이 커지고 공통 업무가 발생한다고 하더라도 서비스의 핵심 업무 단위에 대해서는 세분화하지 않는 전략을 가져가야 한다. 예를 들어 하나의 웹 서비스를 개발하기 위하여 필요한 핵심 업무 단위는 PM, 개발자, 디자이너, DBA, QA라고 판단한다면 이 업무 영역에 대한 세분화는 하지 않는 것이 바람직하다. 또한 각 구성원간의 유기적인 협업이 필요한 경우에도 분리하는 것은 바람직하지 않다. 이 영역에 대한 분리는 신중하게 판단해 마지막 단계에서 분리하는 것이 바람직할 것이다.
조직이 커지면서 조직을 재편할 때 가장 중심에 두어야 한다고 판단하는 부분은 서비스에 중심을 두고 의사 결정을 하는 조직이 만들어져야 한다는 것이다. 조직을 키우더라도 서비스를 중심으로 조직이 커지고, 수직 구조가 만들어 지더라도 서비스를 기준으로 만들어 지는 것이 바람직하다..
서비스 중심으로 조직 구조를 가져갈 경우 각 조직에서 공통적으로 발생하는 문제를 해결하기 위한 방안으로 별도의 조직을 만들고자 하는 경우가 발생한다. 이 같은 요구는 항상 발생하는 것이 아니라 특정 상황에 따라 가끔 발생하는 경우가 일반적이다. 따라서 문제가 발생하는 시점에 해당 문제를 해결하기 위하여 일시적으로 조직(TF 형태)을 만들거나, 만약 공통 문제를 해결하는 상시 조직이 있다면 일정 기간 동안 해당 조직에 참여하여 개발을 진행한 후 원 조직으로 복귀하거나 공통 모듈에 대한 지속적인 지원이 필요하다면 지원 조직으로 남는 형태를 취해야 할 것이다.
예를 들어 A 서비스를 개발하면서 얻게된 지식을 전사적으로 사용하는 것이 좋겠다고 판단된다면 A 서비스에 참여했던 개발자가 사내 프레임워크 개선 조직에 참여하여 해당 기능을 사내에서 범용적으로 사용할 수 있도록 개발하고, 다시 원 조직으로 복귀하는 구조이다.
이와 같이 조직을 유지해야 하는 이유는 지원 업무를 담당하는 조직을 최대한 작은 규모로 유지하기 위해서이다. 지원 업무를 담당하는 조직이 커질 경우 지원 조직은 자체적으로 성과를 만들어야 하는 상황이 발생하는 경우를 종종 본다. 자체적인 성과를 내기 위하여 만들어진 결과물은 실질적으로 각 서비스 조직에서 필요하지 않은 경우가 많다. 그 이유는 지원 조직의 사용자라고 할 수 있는 각 서비스 조직의 요구사항을 수렴하기 보다는 자신의 조직에 성과가 클 것으로 보이는 결과물을 만들어 내기 때문이다. 이와 같이 만들어진 결과물은 서비스에 적용되어야 최종적으로 성과를 낼 수 있다. 따라서 지원 조직은 자신들이 만든 결과물을 서비스에 적용하려는 시도를 끊임없이 시도하게 된다. 이 같은 상황에서 서비스의 목표와 지원 조직의 목표가 충돌하는 상황이 발생한다. 이 같은 상황이 발생하면 어느 조직이 힘이 세냐에 따라서 적용 여부가 결정되는 구조로 치닫게 된다.
따라서 진정 사용자에게 가치를 만들어내는 핵심 업무를 기준으로 조직이 커지는 것이 바람직할 것으로 판단한다. 이 상태에서 특정 문제를 해결하기 위한 지원 조직은 임시 조직으로 유지하거나, 상시 조직으로 유지한다면 최소한의 인력으로 유지하는 것이 바람직하다.
서비스 중심으로 조직이 발전하면 조직 구조가 수직 구조에서 수평 구조로 발전하는 것이 가능하다. 지금까지 국내 거의 모든 회사의 조직 구조는 수직 구조이다. 그러나 수직 구조는 조직이 커지면서 의사 결정자의 단계가 증가하고, 의사 결정자의 수가 많아짐으로써 의사 결정 속도를 더디게 한다. 특히 웹 서비스와 같이 사용자의 요구에 발빠르게 대응하고, 빠르게 변화하는 기술에 대응하기 위해서는 조직이 커지고, 서비스 복잡도가 증가하더라도 빠른 의사 결정을 요구하고 있다. 이 같은 요구에 대응하기 위해서는 수평 구조로 유지하는 것이 더 빠른 의사 결정을 하고 사용자에게 가치를 부여하는 일에 집중할 수 있다.

리소스의 효율적인 사용을 하려면..

각 업무별로 조직 구조를 가져가는 또 하나의 이유는 리소스를 효율적으로 사용한다는 명목이 있다. 한 명의 개발자가 한 서비스를 전담하고 있을 경우 우선 순위가 높은 서비스 또는 프로젝트가 발생했을 때 유연하게 대처하기 힘들다는 것이다. 또 하나는 HTML 마크업이나 디자인 작업과 같이 한 서비스에 100%를 투입할 작업 분량이 되지 않는 경우이다. 이 같은 상황에 대응하기 위하여 업무 단위로 조직을 분리하는 것이 효율적인 리소스 관리가 가능하다고 생각한다.
첫 번째 우선 순위가 높은 서비스에서 새로운 프로젝트가 발생했을 때 어떻게 하면 유연하게 대처할 수 있을까? 업무 단위로 조직을 분리한다고 해서 이 문제를 해결할 수 있을까? 나는 없다고 생각한다. 업무 단위로 조직을 분리하더라도 새로운 업무가 발생하면 똑같은 상황이 발생한다. 따라서 내가 생각하는 해결책은 다음과 같다.
먼저 각 서비스별로 조직 구조를 만들고, 서비스를 운영, 개선하기 위하여 상시적으로 필요한 인원의 적정 규모가 어느 정도인지를 결정한다. 인원 규모는 서비스를 운영하면서 어느 정도가 적정 수준인지를 판단하는 것이 바람직하다. 이와 같이 상시 업무를 담당하기 위한 인원을 제외한 사람들은 별도의 인력풀처럼 관리한다. 이 인력풀에 속해 있는 사람들은 우선 순위에 따라서 자신이 하고 싶은 서비스 또는 프로젝트에 참여하여 업무를 진행하는 방식을 취한다.
인력풀이라고 이야기하니 SI 할 때의 인력 시장과 같은 것 아니냐고 부정적으로 생각하는 사람들도 많이 있다. 하지만 내가 생각하는 인력풀은 인력 시장과는 다르다. 인력풀에 속해 있는 사람들은 자신이 원하는 서비스 또는 프로젝트를 선택할 수 있는 권한을 주고, 서비스 또는 프로젝트가 완료되면 상시 업무를 진행할 것인지, 새로운 서비스 또는 프로젝트를 진행할지에 대한 선택권을 주어야 한다.
한 서비스에서 안정적으로 상시 운영 업무를 하는 것에 따른 장,단점이 있듯이, 인력풀에서 계속해서 새로운 업무를 맡게 되는 사람들에게도 충분한 보상이 주어져야 할 것이다. 예를 들어 하나의 프로젝트가 완료되었는데 바로 다른 프로젝트에 투입하는 형태처럼 하나의 부속품처럼 취급되는 것이 아니라 하나의 프로젝트를 완료하면 자신의 역량을 개발할 시간과 쉴 수 있는 여유 시간에 대한 보상이 뒤따라야 할 것이다.
또한 이 같은 구조를 지속적으로 유지하고 성장시키기 위해서는 서비스 조직, 인력풀 조직, 지원 조직 사이에 유기적인 업무 순환이 있어야 한다.
두 번째는 각 서비스에 한명에게 할당할 업무가 100%가 되지 않는 경우이다. 따라서 한 명이 여러 개의 서비스에 참여해야 효율적인 활용이 가능할 것으로 생각한다.
그런데 정말 이와 같이 관리하는 것이 리소스를 효율적으로 사용하는 방법일까? 한 측면으로 본다면 맞는 맞일 수 있겠지만, 별도의 조직을 만들어 조직을 관리하고 유지하는 비용을 생각한다면 이 또한 만만치 않은 비용이 발생한다. 또한 조직이 분리됨으로써 발생하는 협업 비용 또한 고려해야 할 것이다. 그렇다면 어떻게 하는 것이 합리적인 방법일까? 나 또한 이 부분에 대하여 명확한 해결책을 제시하기는 힘들지만 조직을 분리하는 것만이 좋은 해결책은 아니라고 생각한다.
이상적이기는 하지만 내가 생각하는 첫 번째 해결책은 가능한 한명이 하나의 서비스를 담당하도록 하는 것이다. 한 명이 여러 개의 서비스나 프로젝트를 담당하는 것은 서비스나 프로젝트 간의 이동 비용이 발생하기 때문에 한 명이 여러 개의 서비스를 담당하는 것은 효율적인 방법은 아니다. 하지만 동시에 여러 개의 서비스를 담당하는 상황이 아니라면 괜찮다고 생각한다. 한 명이 여러 개의 서비스를 담당하지만 시간 상으로 겹치는 부분이 많지 않다면 충분히 효율적인 작업이 가능하리라.

각 업무에 대한 역량 강화는?

업무 단위로 조직을 분리하는 이유 중의 하나는 역량을 강화하기 위한 목적이라고 이야기한다. 그런데 정말 업무 단위로 조직을 분리하면 전체적인 역량이 강화될까? 개인의 역량을 강화하는 것이 조직 구조에 따라 달라질까? 물론 일정 부분 영향을 미칠 수 있겠지만, 개개인의 역량 향상에 가장 큰 영향을 미치는 것은 자신의 역량을 강화하기 위한 개인의 노력이다. 개인의 노력이 부족한 사람은 어떤 형태의 조직이 되더라도 큰 효과는 볼 수 없으리라.
업무 단위로 조직을 분리할 경우 오히려 자신의 업무에 대한 이해도와 지식은 높아질 수 있겠지만, 다른 업무에 대한 지식과 이해도는 상당히 낮아지는 것을 느낄 수 있다. 최근 전문화라는 이유로 업무를 세분화해서 자신의 분야에만 관심을 가진다면 이것이 진정 전문가로서 성장할 수 있는 길일까? 진정 전문가로서 성장하려면 자신의 전문 분야 지식도 필요하지만 이와 더불어 서비스(또는 프로젝트)의 전반적인 모습을 같이 볼 줄 알아야 하며, 다른 분야에 대한 지식과 이해도도 필요하다고 생각한다. 그렇게 되었을 때 다양한 분야에 대한 고려가 가능할 것이기 때문이다. "사용자의 입장은 고려하지 않고, 자신의 전문 분야에 빠져 역량만 강화하고 있다면 이것이 진정 전문가의 올바른 길일까?"라는 의구심을 가져본다.
업무 단위로 조직을 분리하던 서비스 단위로 조직을 분리하던 개인의 역량을 강화한다는 것은 쉽지 않은 일이다. 진정 회사가 개인의 역량 강화를 통하여 전반적인 품질 향상을 바란다면 멘토링을 적극 활용하고, 이와 같은 멘토링에 대해서는 개인 성과와 역량에 반영하여 모든 구성원이 적극적으로 참여할 수 있도록 해야 한다. 국내 대부분의 회사를 보면 개인 역량을 강화하고, 교육을 하는 것이 정말 중요하다고 이야기하지만 실상을 보면 신입 사원을 키우고 사원의 역량을 강화하는데 인색한 것이 사실이다. 정말 개개인의 역량 강화가 서비스 품질 향상에 중요하다는 판단을 한다면 단기적인 성과 위주의 전략이 아니라 장기적으로 인내심을 가지고 정책을 펴야할 것이다. 개인의 역량 강화는 단기간에 비용을 투자한다고 해서 해결되는 것이 아니다.

평가는 어떠해야 하는가?

앞의 글에서도 잠시 언급했지만 서비스 기반으로 조직 구조를 가져갈 경우 평가는 서비스 단위로 하는 것이 바람직하다. 하나의 서비스에 여러 업무가 혼재되어 있기 때문에 각각의 개인을 평가하는 것이 힘들 뿐더러 팀워크를 위해서 좋지 않은 방법이다. 업무에 대한 성과는 개인이 아니 서비스를 기준으로, 서비스 지원 조직은 서비스에 대한 기여도를 기준으로 평가하는 것이 바람직할 것으로 판단한다. 물론 내가 생각할 때 평가는 개인이나 조직에 대한 동기 부여 효과는 크지 않을 것이라 생각하지만 그래도 해야 한다면 개인보다는 조직 단위로 하는 것이 불합리한 부분을 최소한으로 줄일 수 있다고 생각한다.
개인에 대한 평가는 개인의 역량에 대한 평가가 되어야 한다. 서비스 기반 조직이고 수직 구조에서 수평 구조로 조직 구조를 유지한다면 과거처럼 좀 더 높은 관리자로 올라가는 것이 승진의 개념이 될 수 없다. 수평 구조에서는 상위 조직장으로 올라가는 것이 의미 있는 것이 아니라 자신의 역량 레벨을 높이는 것을 승진의 개념으로 보아야 할 것이다. 각 업무별 역량에 대한 기준을 세우고 이 기준에 따라서 개인별로 역량 레벨을 평가하는 방식이 되어야 할 것이다.
피터 드러커는 프로페셔널의 조건에서 조직에 대한 공헌의 세 가지 영역에 다음과 같이 이야기하고 있다.
'공헌'은 여러 가지를 의미한다. 모든 조직은 세 가지 주요 영역에서 성과를 올리 필요가 있다. 1) 직접적인 결과를 산출하고, 2)가치를 창출하고 재확인하며, 3)인재를 육성하는 것이 그것이다. 만일 이 세 가지 영역 가운에 어느 하나라도 성과를 달성하지 못한다면, 그 조직은 썩어서 없어지고 말 것이다. 그러므로 조직에 몸담고 있는 모든 지식 근로자의 공헌 활동은 이 세 가지 영역과 연결되어 있어야만 한다. 한편 세 영역의 상대적인 중요도는 조직의 필요에 따라 그리고 지식 근로자 개개인에 따라 상당히 많이 달라진다.
– 피터 드러커, 프로페셔널의 조건 중에서..
위 글에서 피터 드러커가 이야기하고 있듯이 지식 근로자를 평가하고 판단할 때 세 가지 측면에서 회사에 대한 기여도를 판단해야 할 것이다. 하지만 많은 회사에서 "1)직접적인 결과를 산출하고"에 해당하는 직접적인 성과에만 집중하는 경향이 있다. 이와 같이 성과에만 집중하게 되면, 회사 전반적인 분위기가 단기적인 성과에만 집착하게 되는 경향이 있다. 또한 성과 위주의 평가가 우선시되는 많은 조직을 보면 서비스를 안정적으로 운영하는 것보다 새로운 기능을 추가하는 것에 더 큰 가치를 부여하는 경향이 있다. 새로운 결과물을 만들어 내는 것이 성과 측면에서는 더 큰 성과로 보이기 때문이다. 하지만 이 같은 현상은 결과적으로 고객의 목소리에 귀기울이기 보다는 각 조직의 성과에 이익이 되는 업무를 우선시하는 경향이 발생하게 된다. 따라서 조직과 개인을 평가할 때 직접적인 성과 뿐만아니라 "2)가치를 창출하고 재확인하며, 3)인재를 육성" 부분에 대한 기여도 고려해야 할 것이다.

지식 근로자인 우리는 어떻게 대응해야 하는가?

내가 위에서 제시하는 형태로 조직 구조를 가져갈 경우 지금까지 일하던 방식과 다르기 때문에 많은 부분에서 혼란스러움을 느낄 수 있다. 이 같은 변화에 대응하기 위하여 우리 지식 근로자들은 어떻게 대응해야 할까?
지금까지 수직 구조에서는 위에서 시키는 일만 열심히 하고, 조직이 움직이는 데로 따라가기만 하면 되는 수동적인 자세를 가지고 있는 것이 사실이었다. 하지만 수평 구조로 변경된다면 지금보다는 좀 더 적극적으로 자신의 의견을 개진하고, 자신의 역량을 강화하기 위하여 더 많은 노력을 해야할 것이다.
이 같은 노력은 회사를 위한 것이 아니라 결과적으로 우리 자신을 위한 것이다. 좀 더 효율적으로 일함으로써 더 좋은 품질의 서비스를 만들어 회사에 기여하는 바도 크지만 궁극적으로 우리가 시간적인 여유를 가질 수 있으며, 이런 여유 시간을 통하여 좀 더 재미있고, 의미 있는 일들을 해나갈 수 있을 것이기 때문이다.

마치며..

지금까지 세 번에 걸쳐서 글을 작성했다. 이 번 글에서 제시하고 있는 것처럼 조직 구조를 바꾸고, 평가 제도를 개선한다고 지금까지 비효율적이었던 부분이 곧바로 효율적인 구조로 바뀐다고 생각하지 않는다. 내가 세 번의 글을 통하여 이야기하고 싶었던 것은 업무 세분화, 전문화로 인해 비효율적인 부분에 대하여 다룬 것 뿐이다. 업무와 조직을 너무 세분화하는 것은 많은 문제점을 가지고 있기 때문에 신중해야 한다는 것이며, 새로운 방법으로 접근할 수도 있다는 것이다.
실질적으로 업무의 효율화와 생산성을 극대화하기 위한 더 좋은 방법은 바로 우리 개개인의 마음 가짐이다. 어떤 조직 구조를 가지던, 어떤 평가 체계를 가지던 간에 같은 목표와 비전을 가지고 업무에 임할 수 있다면 크게 중요하지 않다. 각 조직의 성과 위주가 아니라 정말 사용자에게 가치를 만들어 내는 것에 집중할 수 있는 환경이라면 어떤 조직 구조라도 상관 없다. 하지만 이런 상태를 유지하는 것은 쉽지 않다. 특히 조직이 커지면서 이와 같은 초심을 유지하는 것은 더더욱 힘들어지게 된다. 이런 상황에서 좀 더 사용자 지향적이고, 목표 중심적인 조직 구조 형태가 어떤 것인지에 대하여 언급했다.

이 글은 내가 포털 회사에 4년 간 몸담고 있으면서 느꼈던 내 나름대로의 생각을 정리한 것이다. 이 글의 내용은 포털과 같이 하나의 소프트웨어를 지속적으로 관리하고 성장시켜 나가야하는 소프트웨어 개발 회사에 도움이 될 듯하다. 나는 지금까지 웹 에이전시, SI 회사에 몸담은 경험이 더 많은데 웹 에이전시, SI와 같이 특정 회사에 업무 의뢰를 받아 단기간에 개발을 완료해야하는 조직에는 적합하지 않을 수 있다.
이 글의 내용은 내가 몸담고 있는 조직의 의견과는 무관하다. 지금까지 소프트웨어 개발 업무를 진행하면서 느꼈던 내 나름대로의 생각을 정리한 것이다. 내가 이 글을 쓰는 가장 큰 이유는 내가 잘못 판단하고 있는 부분도 많을 것이기 때문에 그에 대한 의견을 받아보고 더 바람직한 모습에 대한 논의를 해보고자 함이다.
논리적으로 타당하지 않거나 근거가 부족하다고 생각하는 부분에 대해서는 가차없이 의견 마구마구 날려주기 바란다.

웹 기술의 발전에 따른 개발 방향의 변화, 2013

Java를 1년정도 공부해보면서 이젠 슬슬 내용을 blog에 공개를 해도 될 것 같아서 공개를 해봅니다. 부끄러운 내용이지만, 도움이 될 수 있으면 좋겠습니다.

웹기술은 standalone에서 부터 시작해서, 2 tier, 3 tier, n-tier로 발전하게 되었고, 그에 따른 기술 역시 계속해서 발전해나간것을 알 수 있습니다.


standalone 시기

HTML이 처음 나오던 시기입니다. HTML에 대한 기술 습득과 http를 서비스할 수 있는 web server에 대한 기술이 발전했습니다. 지금은 누구나 하는 html 수정이 굉장한 기술이 되던 시기였습니다. 오히려 기술적으로는 web server를 직접 개발해서 서비스를 하는 문제가 더욱더 큰 이슈를 가지고 왔습니다. 그리고, 이때 개발의 방향을 바꾼 vm 기술이 나오기 시작했습니다. 전에 이야기한 .net과 java 기술이였지요. 이 두 기술 역시 처음부터 web에 집중한것은 아닙니다. 이때는 주로 사용되는 web server들이 Apache httpd 가 주로 사용이 되었고, static resource를 이용하는 형태가 주가 되었기 때문에 HTML coder 또는 web server 기술, 두 기술만이 발전하고 있었습니다.
이때 기술의 승자는 apache 재단에서 시작한 httpd와 IIS 입니다. Http daemon 의 약자인 httpd는 아직도 Apache 서버라는 이름으로 불리우고 있습니다. (정식이름은 Apache Httpd 서버입니다.) 또한 MS의 IIS 역시 시장에서 많이 사용되는 Platform으로 사랑받기 시작했지요.

2 tier 시기

Web 기술이 폭발적으로 발전하던 시기입니다. RDBMS의 발전으로 인하여 DB의 내용에 따른 dynamic web이 발전하게 됩니다. 이때, dynamic web기술의 어려움에 의하여 여러 변형 기술들이 계속해서 나오게 됩니다. 큰 기술 흐름만을 보면 다음과 같습니다.

asp의 폭발적인 발전

기존 개발자들의 70%정도를 차지하고 있던 visual basic 개발자들을 모두 web 개발자로 만들어주는 asp와 iis가 처음 선을 보이게 됩니다. 기존 visual basic 개발자들은 모두 db와 db를 표현하는 방식에 대해서 경험이 풍부한 사람들이였습니다. 그 개발자들을 모두 web 개발자로 만드는 엄청난 일을 MS가 성공하게 됩니다. 지금보면 참 문제가 많은 개발방법으로 개발하게 되지만, 그 당시에는 최고의 기술이였으며 누구나 쉽게 웹 프로그래밍에 접근할 수 있다는 점이 가장 큰 장점이였습니다.

php의 발전 및 apache httpd의 확장

기존 standalone 서버에서 주로 사용되던 apache httpd를 이용한 dynamic web programming이 대두되게 됩니다. php는 asp의 장점을 흡수하고, 보다 쉬운 표현 방법을 제시합니다. 그리고 LAMP 라는 환경을 제시하기 때문에, 기업은 새로운 x86 windows server를 구매하는 것이 아닌 공짜로 web을 서비스할 수 있다는 점에서 기존 asp 시장을 잠식하기 시작합니다. 또한 linux 서버환경의 폭발적인 증가로 인하여 서버 환경이 기존 UNIX에서 linux 계열로 발전하게 된 계기가 됩니다.

servlet과 asp .net의 발전

asp와 php로 인하여 dynamic web application이 엄청난 발전을 하게 됩니다. 하지만 asp의 경우 언어의 특성상 큰 약점을 가지고 있습니다. page단위로 동작하게 되기 때문에, 현대적 프로그래밍 기법인 OOP를 사용할 수 없습니다. (방법은 있으나, 매우 괴악한 방법입니다.;) 점점 application이 거대화되어가면서 코드의 재 사용성 및 유지보수의 약점을 극복하기 위해서 asp와 php에 가려서 잠시 존재감을 잊어가고 있던 java와 .net이 다시 등장하게 됩니다.
두 언어는 RDBMS를 표현하는데 있어서 최선(?)의 방식을 가지고 있었으며, vm 기술의 발전으로 memory 및 performance에 강점을 가지고 있었기 때문에, 기존의 web 개발 시장을 빠르게 잠식해나가기 시작합니다.

fat client의 발전

servlet과 asp .net의 발전은 RDBMS와 dynamic web application간의 여러 문제를 모두 해결해준것같지만 사용자들에게 다양한 경험을 보여주기 위한 View를 제공하는데에 있어서, 기존의 HTML만은 한계를 가지고 있었다. 동영상과 같은 멀티미디어를 포함하기에는 기존의 HTML이 지원하지 않는 부분이 너무나 많은 영역들이 있었기 때문입니다. 멀티미디어에 대한 지원을 강화하기 위해서 나온 첫 기술이 micromedia의 Flash입니다. Flash는 멀티미디어의 지원뿐 아니라, 웹을 보다 더 아름답게 만드는데 큰 공헌을 하게 됩니다. Flash의 대성공으로 MS는 asp로 마련했던 서버 시장에 심각한 타격을 입게 됩니다. 그래서 자사의 IIS + .NET Framework 기술로 동작하는 silverlight를 출시하기에 이릅니다. 이러한 멀티 미디어의 지원과 더불어, RDBMS에 특화된 fat client들이 나오게 되는데, PowerBuilder가 바로 그것입니다.
fat client의 발전은 기존 servlet과 asp .net 기술과 충돌을 일으키게 됩니다. 단순히 servlet과 asp .net을 fat client의 container로 이용하게 되고 모든 로직을 fat client에서 처리하게 되는 개발 방법이 한 때 유행하게 됩니다.

3 tier, n tier 시기

2 tier 가 발전한 형태인 3 tier에서는 다양한 요구사항이 생기게 됩니다. 기존 2 tier system의 확장을 통한 여러 시스템간의 결합으로 최종적으로는 enterprise system으로의 진화, 발전이 바로 그것입니다. 기존 2 tier system에서는 해결할 수 없는 기술적 이슈들이 발생하게 됩니다. 다양한 시스템들이 나오게 되고 그 시스템들간의 상호 통신에 의하여 기존 2 tier 에서 n tier로 계속되는 발전이 이루어지게 됩니다. 이 때는 다음과 같은 기술들이 발전하기 시작합니다.

script language의 발전

기존 .net과 java와는 다른 언어들이 발전하게 됩니다. 기존의 asp와 php가 OOP적 성격을 갖지 못한 단점을 해결하고 OOP적 장점과 개발의 편의성을 극대화한 script language가 발전하게 됩니다. python, ruby가 대두되기 시작하지요. 이 언어들은 기존의 객체 지향적인 특징과 asp, php와 같은 script 적 성격을 모두 갖게 됩니다. 개발의 속도, 변화 가능성에 대한 열린 대응을 토대로 이와 같은 script language가 계속된 발전을 하게 됩니다. 해외의 많은 시스템들이 하부 tier의 경우에는 ruby, python으로 개발된 것을 지금도 자주 볼 수 있습니다.

web service의 개발

n tier system의 발전은 web service가 없었다면 불가능하다고 할 정도로 web service는 n tier system에 깊이 관여되어 있습니다. web service는 기존의 tier를 종적으로나 횡적으로 모두 확장을 시키는 가장 결정적인 역활을 하게 되는 계기가 되었습니다. "Service로서의 Web"에 대한 개념은 수많은 파생적 개념을 만들어 내고, 기술적 발전을 가지고 왔습니다. 기존에는 SOAP을 기반으로 한 web service가 주로 사용되었으나, 지금은 client(javascript) 등에서의 호출 문제로 인하여 xmlrpc의 경량화된 버젼인 REST를 주로 사용하고 있습니다. 이 REST에 대해서는 다시 한번 설명할 기회를 갖도록 하겠습니다.

MVC의 발전

기존의 웹의 개발은 단순히 DB의 결과값을 웹에 표현하는 방식이였습니다. 대부분의 Business Logic은 DB에서 가지고 있고, 그 Business Logic을 web에 표현하는 방식이 대부분이였지요. 이렇게 된 가장 큰 이유중 하나는 웹으로 개발을 한 내용은 웹에 너무나 밀착되어있는 프로그램이라서, Business Logic만의 테스트가 거의 불가능하다는 것에서 시작되었습니다. 그렇지만, n tier system으로 발전해나가면서 tier만의 중복된 Business Logic을 정리 및 관리하는데 있어서 기존 프로그래밍 언어로 하고자 하는 욕구가 계속해서 발전되어 갑니다. SP에 대한 Handling과 계속되는 개발은 필연적인 중복코드와 로직의 누수가 발생하기 마련이니까요.
이때, ruby를 기반으로 한 ruby on rails가 발표됩니다. rails framework라고도 불리우는 이 framework는 기존의 web 개발 방법을 완전히 바꿔놓게 됩니다. 사용자에게 보여지는 영역인 View, Http response/request를 처리하는 Controller 마지막으로 Domain의 Business Logic을 처리하는 Model로 완벽한 영역을 분리할 수 있음을 ruby on rails는 보여주게 됩니다. 이러한 장점은 각 영역을 개발자들이 테스트를 해볼 수 있고, 영역에 대한 전문화를 분리시킬 수 있기 때문에 단숨에 웹 개발의 주도적 방법으로 대두되었습니다. java에서는 struct2가, .net에서는 asp .net mvc가 기존 ruby on rails의 사상을 반영한 MVC web framework입니다.
개발자는 지금 MVC를 중요하게 봐야지 됩니다. MVC 개발 방법은 웹뿐 아니라, 모든 application에 적용되어 있는 상황이고 각 영역에 대한 테스트를 통해서 자신의 코드의 완벽성을 스스로 검증할 수 있는 기회를 가지게 되었습니다. 에러에 대한 명확한 정의가 가능하게 되었으며, 에러가 발생했을때의 장애 처리와 같은 새로운 프로세스 정립 역시 MVC의 확립으로 가능하게 되었습니다. 이 부분은 지금까지는 개발자가 아닌, 기획이나 의사결정자들의 손에 있던 부분이였지만, 지금은 개발자들이 제시하는 방법을 선택하는 방향으로 전환이 된 상태입니다.

mobile 기기의 발전 및 확산

기존 n tier system의 발전은 획적 확장에 해당된다면 mobile 기기의 발전 및 확산은 종적 확장에 해당됩니다.기존까지 있던 web application의 대상은 모두 PC의 browser를 대상으로 하고 있었습니다. PC를 기반으로 하고 있기 때문에 PC의 특정 browser만을 target으로 하고 개발이 가능해졌지요. 그렇지만, iPhone을 시작으로 한 mobile 기기의 발전은 이러한 생각을 모두 바꾸어놓게됩니다. 누구나 가지고 다니는 mobile 기기는 언제 어디에서나 접근이 가능한 특징을 가지고 있습니다. 이는 기존보다 많은 접속을 만들어 내고, 모든 device에서 동일하게 보여야지 된다는 문제를 가지고 오게 됩니다. 그리고, mobile device의 빈약한 시스템 자원과 기존 windows system과 다른 OS 환경으로 인하여 HTML의 표준화에 대한 요구 사항이 높아지게 됩니다.

fat client의 쇠퇴와 HTML5의 대두

기존 flash와 silverlight와 같은 fat client가 mobile device에서 정상적으로 동작하지 않는 문제가 발생하게 됩니다. 이는 기존 PC에서도 windows-IE 환경 이외에서도 계속 지적되던 문제였지만, 본격적인 문제로서 국내에서는 대두되기 시작한 것은 바로 mobile 기기의 확산때문입니다. 기존 HTML에서 지원되지 않던 multimedia에 대한 지원을 비롯하여 animation과 websocket등의 표준화로 인하여 기존 flash와 silverlight가 설 자리가 없어지기 시작합니다. 지금 fat client는 flash만을 제외하고 거의 사장되어가는 분위기입니다. Flash의 경우에도 HTML5의 확산 전까지 잠시의 대체제로서의 의미 이외에는 퇴색해가는 것이 현실입니다. 기존 Flex 개발자들이 설 자리가 많이 없어지고 있지요.

Big data와 Cloud 의 대두

끊임없이 이야기가 나오고 있는 Big data와 Cloud는 mobile 기기의 발전 및 확산과 기존 web system의 오랜 발전으로 인하여 나온 기술이라고 할 수 있습니다. 기존의 RDBMS에서는 처리를 할 수 없을 정도의 데이터가 이제는 수집이 된 상태이고, 이 데이터들을 어떻게 분석을 해야지 될지. 이 데이터들을 어떻게 활용을 해야지 될지. 그리고 많은 mobile 기기에서 동시 다발적으로 들어오는 데이터를 어떻게 해야지 될지에 대한 물음에서 Big Data와 Cloud를 활용하는 방법을 찾아보는것이 방법일것 같습니다. 이러한 Big Data를 저장하기 위한 방법으로 cassandra, mongoDB, 등이 있으며 Big Data를 처리하기 위한 방법으로 Hadoop이 대두되게 됩니다. 또한 Cloud 시장은 아직 춘추전국의 시대와 같이 복잡한 상황이며, 시장 1위인 amazon의 EC2에 MS의 Azure, Google의 Google Cloud Platform등이 경쟁을 하고 있습니다.

Open source의 대두

기존에는 특정 회사의 특정 Solution 위주의 시스템에서부터 Open Source를 조합한 Open Platform이 대두됩니다. stacktrace, github 등의 사이트에서 여러 개발자들이 참여한 open source들은 어머어마한 양과 회사들이 만든 Solution보다 더 뛰어난 성능을 자랑하며 모든 시장을 휩쓸고 있습니다.
이러한 기술적 흐름속에 개발자가 익혀야지 될 기술은 어마어마하게 많은 것이 사실입니다. 그렇지만, 지금(2013)년을 기준으로 우리가 해야지 되는 기술들은 조금 목표가 정해질 수 있습니다. 어찌보면 지금까지 서론을 이야기해왔다면, 이제는 어떤 기술을 익혀야지 되고, 어떤 기술을 중심으로 다른 기술들을 곁다리로 붙여서 발전해나가야지 되는지에 대한 이정표가 될 수 있겠지요.

웹 개발자가 익혀야지 될 기술들 - 2013년 기준

.net보다는 java

대한민국에서 개발자로 먹고 살기 위해서는 .net은 이미 밀렸습니다. 행안부 기준의 정부표준 프레임워크가 java로 발표가 되고, 정부 표준 프레임워크로 모든 SI 사업이 진행되어가고 있는 현 상황에서 더이상 .NET을 한다는 것은 이제는 개발자로서의 자신을 스스로 학대하는 일 그 이상, 그 이하도 안되게 되었습니다. 일단 java에 집중하는 것이 맞습니다. 그리고 세계적으로도 java의 놀라운 발전은 이제 JVM의 성능이 Ch2.의 성능까지 따라왔다는 이야기가 나올정도로 최적화 및 향상이 되었습니다. 더이상 느리다는 이야기가 나오지를 않는 추세지요.

spring

정부표준프레임워크의 핵심입니다. 정부표준프레임워크는 spring으로 구성이 되어 있고, spring으로 돌아갑니다. 일단 spring을 잘 할 줄 알면, 정부 표준 프레임워크의 반이상은 해결하고 들어간다고 보면 됩니다. spring에 대한 소개에서 다시 이야기를 하겠지만, spring 자체가 java의 표준화에 영향을 주고 있고, java의 표준 자체가 spring이 되어가고 있는 현실입니다. 이 추세로 간다면 spring은 하나의 open source framework가 아닌 java의 일부분이 될 수 있을 것 같습니다.

DB 기술

dao(data access object) 기술은 오래되었지만, 그 기술을 표현하는 방식은 계속해서 바뀌어왔습니다. DB의 특정 데이터들을 보이기 위한 VO로 접근하는 방식과 DB역시 객체화 하여 객체적으로 접근을 하는 ORM 방식으로 크게 나뉘고 있습니다. 현장에서는 국내는 VO 방식을 더 많이 사용하고 있으나, 세계적으로는 ORM 방식이 압도적으로 많이 사용하고 있습니다. 두가지 모두 알아야지 됩니다.

Controller 기술

spring의 세부 기술중 하나입니다. spring에 대해서 잘 안다면...에 포함되는 기술 영역이긴 하지만, HTTP가 어떻게 활용되어가는지에 대한 이해가 필요합니다. 이는 Servlet Container(ex:tomcat)에 대한 이해와도 같이 연결이 됩니다. web이 돌아가는 시스템에 대한 이해라고 할 수 있습니다.

Modeling 기술

Modeling은 소위 말하는 '업무분석' 과정입니다. 업무를 분석하고 분석한 업무를 programming language로 구현 가능한 형태로 추상화를 시키는 과정을 의미합니다. 개발자의 생각의 방향은 학교에서 자주 들은 Divide & conquer 입니다. 작게 나누고, 하나하나 해결해나가고. 그 해결한 조그마한 것들을 다시 붙이는 작업들이 필요합니다.

개발 방법론

소프트웨어 공학은 매우 변화가 심한 학문입니다. 건축학에서 많은 개념들을 차용해왔으나, 지금은 건축학과는 많이 다르다는 것을 인지하고 접근하고 있습니다. 요즘 S/W 개발 방법론의 추세는 agile 개발 방법론입니다. agile에 대해서는 차후에 보다 더 심도있게 짚어보도록 하겠습니다.

패턴 (Pattern)

개발 방법론과 매우 유사한 분야입니다. 개발을 할때, 코드를 최적화 하는 패턴들이 존재합니다. 패턴을 익히는 것보다는 패턴을 이용해서 개발자들끼리의 의사소통이 가능해져야지 됩니다. 개발자들끼리 사용하는 약어가 되는 경우가 꽤나 많습니다. 그리고 책을 통해서 학습을 할때도 유용합니다.

단위 테스트 (Unit Test)

개발자는 자신이 만든 모든 s/w를 테스트할 수 있어야지 되고, 그 테스트한 결과로서 자신의 s/w의 품질을 증명할 수 있어야지 됩니다. "내가 하면 되었는데.", "어제는 되었는데." 식의 이야기는 곤란합니다. in/out이 결정나면 그 in/out에 대한 명확한 테스트를 하고 그 테스트 결과를 보여줄 수 있어야지 됩니다. 또한 s/w의 규모가 크면 클수록 그 코드를 검증할 수 있어야지 됩니다. 이제는 테스트를 돌리기 위해서 개발을 한다. 라는 말이 나올 정도로 테스트는 일반화된 기술입니다. 자동화된 테스트를 구성하는 능력은 반드시 필요합니다.

http://netframework.tistory.com/entry/%EC%9B%B9-%EA%B8%B0%EC%88%A0%EC%9D%98-%EB%B0%9C%EC%A0%84%EC%97%90-%EB%94%B0%EB%A5%B8-%EA%B0%9C%EB%B0%9C-%EB%B0%A9%ED%96%A5%EC%9D%98-%EB%B3%80%ED%99%94

웹 컴포넌트: 차세대 프론트엔드 웹 개발로 가는 관문, 2014


2014년 2월 23일 일요일

[튜토리얼/MashUp] 웹 컴포넌트: 차세대 프론트엔드 웹 개발로 가는 관문(Web Component: the Gate to Next Front-end Web Developments)

오랜만에 업데이트를 하게 되는군요. 그간 HTML5Rocks의 튜토리얼들을 함께 번역해주신 분들의 노력에 힘입어 Web Component에 관련하여 설명할 수 있는 문서의 뼈대가 만들어졌습니다. 다른 한글화 및 업데이트 소식들도 밀려있는데 잠시 미뤄두고 이에 대한 포스팅을 하고자 합니다.

완전히 동의합니다. :) [출처: +Zeno Rocha - A future called Web Components]

"다소 거창한 제목을 붙였습니다만;; 컴포넌트가 완전한 에코 시스템하에서 가지는 강력함과 파괴력을 우리는 다른 플랫폼에서서도 익히 봐왔습니다. 같은 관점에서 웹 컴포넌트 역시 프론트엔드 개발에 있어 많은 변화를 예고하고 있는 기술이라고 예상할 수 있지 않을까요?" 



웹 컴포넌트?


웹 컴포넌트(Web Component)의 개념 자체가 아주 새롭고 특별한 기술은 아닙니다. 오랜동안 개발을 해오신 분들이 아니더라도 '컴포넌트(Component)'라는 말은 들어보셨으리라 생각합니다. 그러나 웹 컴포넌트가 가지는 의미를 알기 위해 웹에서의 컴포넌트가 왜 필요한지에 대해 잠시 생각해보도록 하겠습니다.


> 골격만큼이나 중요한 다른 것들...


한두번쯤은 게시판을 꾸미기 위해 혹은 만들기 위해 마크업 작업을 해보신 경험이 있을 것입니다. 사실 의미적으로 마크업이 가지는 모습은 매우 명확합니다. '<head>'에는 사용자의 눈에는 보이지 않지만 브라우저가 먼저 처리해야하는 많은 것들이 기술되어 있으며 '<body>'에는 우리가 사용자에게 전달하고자 하는 정보들이 담긴 수많은 마크업과 텍스트들이 존재합니다. 물론 이미지도 말이죠. 단지 이 관점에서 보자면 문서는 그리 복잡하지 않습니다. 예를 들어 W3C의 대한민국 인터넷 관심그룹이 그렇습니다. 문서는 깔끔하게 필요한 태그들만을 가지고 있고 그 자체로도 문서는 완전합니다.

그러나 실제는 어떤가요? 실제 현장까지 가지 않고 개인 홈페이지만 살펴보더라도 스타일에 대한 많은 시도들이 보이고 있습니다. 이들은 화려하고 아름답고 때로는 사용자 경험(UX)를 개선하는 많은 기능들을 제공합니다만 그 뒤에는 너무나도 복잡해져만 가는 마크업들과 스타일, 자바스크립트들이 존재합니다. 많은 요구사항들이 본래의 구조보다 많은 개발들을 요구하고 있죠. -물론 국내는 웹이 대중화되던 초기부터 그랬습니다. 지금은? :)-

GMail은 편리하지만 태그는 그렇지 않습니다. :( [출처: HTML5Rocks 'Custom Element' 튜토리얼]

GMail을 예로 들어보죠. 저는 GMail을 이용하고 있고 실제로는 애용하고 있습니다. 이 서비스는 쉽게 메일을 읽고 편리하게 기록 속에 남아 있는 다른 사용자들의 메일주소를 몇번의 타이핑만으로 찾을 수 있으며  답장 역시 현재 읽고 있는 페이지에서 가능합니다. 그러나 과연 개발도 그럴까요? 이 서비스를 개발자도구로 열어본다면 아마 그렇지 않다고 생각하게 될 것입니다.

전 오랜동안 네이티브 앱이나 서비스, 플랫폼을 개발해왔습니다. 사실 개발에 촛점을 맞춰보자면 웹 개발을 마지막으로 한 것은 CGI와 ASP가 전성시대를 열던 초기에 있었던 몇번이 제 경험의 대다수라고 해도 과언이 아닙니다. 그리고 현재 시점에서 다시 웹을 살펴보았을 때 정말 많은 것들이 바뀌었고 그에 놀라워함에도 불구하고 개발 방법 자체는 예전에 작업하던 많은 방식들이 그대로 이루어지고 있다는 것에 다시 놀랄 수 밖에 없습니다. (사실 편리해진 것들도 많고, 모든 것을 바꿔야할 필요가 없다는 것은 잘 알고 있습니다.)

여전히 우리는 다른 프로젝트에서 사용했던 리스트 아이템들을 새로운 프로젝트에서도 적용하기 위해 마크업을 복사해서 수정하고 스타일링을 위한 새로운 CSS를 작성하거나 기존 스타일과의 충돌을 제거하고, 자바스크립트를 최대한 모듈화하여 작성하고 있습니다. 그러나 여전히 이는 근본적인 재활용 방법이 아닌 개발자의 역량과 경험에 의존하고 있는 일종의 개선된 Workflow에 가깝습니다. 즉, 언제든지 우리는 태그의 바다(Tag Soup)와 같은 위험 지역에 다시 빠질 수 있는 가능성을 안고 있습니다. 게다가 태그의 바다에 빠진다는 것은 CSS나 자바스크립트의 태풍 속에 노출된다는 것과도 같죠.


> 무엇이 필요할까?


사실 우리는 필요한 것이 무엇인지는 이미 알고 있습니다. 다만 지금까지는 이를 방법론으로, 개발도구로, 경험으로 해결해왔을 뿐이죠. 이제 우리에게 필요한 것은 '자주 사용되는 유용한 것들 혹은 구조 상 분리가 필요한 것들을 개발의 다른 요소들과 충돌하지 않는 형태로 재활용이 가능하도록 만들어 주는 일관적인 방법'입니다. 특히 UI 요소들이 많은 프론트엔드 개발에서는 '리소스 관점에서 분리되어 있는 HTML, CSS, 자바스크립트를 하나로 묶어 주는 것' 또한 중요한 기능 중의 하나가 됩니다. 소프트웨어 개발에서는 이러한 요소들을 '컴포넌트(Component)'라는 개념으로 오랜동안 사용해 왔으며 예를 들자면 백엔드에서는 이미 다양한 형태의 컴포넌트가 각 플랫폼에 적합한 형태로 오랜동안 배포되고 사용되어 왔습니다. 이제 조금 더 나아가서 우리는 컴포넌트를 웹에서 (특히 프론트엔드 개발에서) 사용할 방법이 필요하며 가능하다면 도구적인 지원을 받을 수 있으면 더 좋을 것입니다.

다행스럽게도 W3C에서는 이러한 컴포넌트 기술을 웹에서 적용할 수 있도록 새로운 규격의 집합을 만들었으며 이 규격들을 묶어 '웹 컴포넌트(Web Component)'라고 부르게 되었고 이를 지원하는 도구와 라이브러리들의 작업이 여러 곳에서 매우 빠르게 진행되고 있습니다.



웹 컴포넌트를 지탱하는 규격들


앞에서 말씀드린 바와 같이 웹 컴포넌트는 하나의 규격으로 이루어진 것은 아닙니다. 개별적인 특성을 가진 여러개의 규격으로 이루어져 있죠. 이 포스트는 웹 컴포넌트의 기술적인 내용을 목적으로 하고 있지는 않지만 어떠한 규격들로 이루어져 있는지는 살펴보도록 하겠습니다.

웹 컴포넌트는 다음과 같은 4가지의 규격으로 구성되어 있습니다.

  • Shadow DOM - 컴포넌트의 DOM, CSS, JS를 감추는 캡슐화(encapsulation)와 외부로부터의 간섭을 제어하는 스코프(Scope)의 분리를 제공
  • HTML Template - 로딩 시간에는 비활성화되는 마크업을 정의하고 이를 실행 시간에 복제할 수 있는 기능을 제공
  • Custom Element - 웹 문서에서 사용할 엘리먼트의 동적인 등록을 통해 컴포넌트의 명시적인 alias를 선언
  • HTML Imports - 웹 문서 내에 외부 리소스를 포함(Import)하기 위한 기능을 제공


각 규격에 대해 간략하게 살펴보기 전에 +Eric Bidelman이 JSCamp에서 발표했던 다음 영상을 확인해보시기 바랍니다. (발표 자료는 여기에서 확인할 수 있습니다.)

JSCamp Talk: Eric Bidelman - WebComponents are the Future


> 캡슐화와 스코프의 제어 - Shadow DOM


지금까지의 웹 개발에서 하나의 페이지는 하나의 문서를 나타내었습니다. 이들은 구조를 나타내는 마크업이나 표현을 위한 스타일, 동작에 대한 자바스크립트들이 복잡하게 얽혀있지만 브라우저는 언제나 이들을 하나의 문서로 통합하여 제어해왔습니다. 하나로 보이는 것은 언제나 중요한 일입니다만, 실제로도 하나로 다루어지기 때문에 우리가 작성하는 모듈이나 마크업들은 언제나 다른 영역과 함께 보이고 관리되며 처리되어 왔습니다.

이러한 문제로 인해 웹 페이지를 개발할 때 몇 가지 UI 요소들은 지속적으로 재활용됨에도 불구하고 개발자가 올바른 DOM 트리를 구축하기 위해 마크업을 재작성하고 UI 요소를 둘러싸는 다른 요소들과의 구조적인 이슈들을 해결하기 위해 추가적인 작업을 필요로 합니다. 이러한 과정에서 발생하는 복잡한 DOM 트리들(좀 더 정확하게는 Tag Soup)은 재사용성과 개발 효율성에 크게 영향을 미치는 부분이기도 합니다.

Shadow DOM은 이러한 하나의 문서에서 특정한 DOM을 통해 복잡한 서브 DOM 트리를 대표할 수 있도록 만들었습니다. 이러한 개념을 우리는 캡슐화와 스코프 관점에서 바라 볼 수 있습니다.

"캡슐화(Encapsulation)은 소프트웨어 공학에서 매우 중요하게 다뤄지던 개념 중의 하나입니다. 캡슐화는 어떠한 모듈이나 기능 단위를 인터페이스만 남기고 외부로부터 완전하게 감추어주는 역할을 하며 Shadow DOM의 대표적인 장점 중의 하나이기도 합니다. 스코프(Scope)는 이러한 캡슐화 과정에서 나타나는 부산물이지만 여러가지의 모듈이 연동하는 소프트웨어에서 각 모듈의 독립적인 동작을 보장하는 매우 중요한 개념입니다. 조금 더 정확하게 얘기하자면 Shadow DOM은 스타일에 대한 캡슐화도 지원하고 있습니다."

이러한 동작들이 어떻게 이루어지는지를 이해하기 위해 +Eric Bidelman이 작성한 'Shadow DOM Visualizer'를 통해  시각적으로 확인해 볼 수 있습니다.



우리는 Shadow DOM을 이용하여 컨텐츠와 표현을 분리할 수 있습니다. Shadow DOM은 이를 이용하여 캡슐화된 DOM 트리를 HTML 문서에 활용할 수 있는 가장 기초적인 개념과 원칙을 제공합니다. 표현(Presentation)과 내용(Contents)의 분리는 하나의 웹 문서가 지나치게 복잡해지는 태그의 바다(Tag Soup)를 해결해줄 뿐만이 아니라 보다 근본적인 기능-즉, 개발된 UI 요소의 재사용을 위한 가장 기본적이고도 중요한 기능-을 제공합니다.

또한, Shadow DOM이 컴포넌트를 구성하는 DOM을 감추는 역할(encapsulation)뿐만이 아니라 스타일에 대한 캡슐화를 지원함으로써 여러분은 배포된(혹은 배포한) 웹 컴포넌트에 대해 여러분의 스타일을 유지하거나 반대로 사용자의 페이지의 Look&Feel을 상속받아 위화감 없는 스타일을 구성할 수도 있습니다. 이러한 스타일에 대한 캡슐화는 특히 사이트를 구축하는 UI 요소로써는 매우 중요한 속성이 될 것입니다. 더불어 이러한 캡슐화된 스타일을 어떻게 관리할 것인가도 웹 컴포넌트의 사용자들에게는 중요한 지점이 될 것입니다.


> 런타임에만 활성화되는 복제 가능한 마크업 - HTML Template


템플릿은 뷰를 위한 기반 구조로 사용되는 미리 작성된 형식의 문서나 파일입니다. 즉, 문서가 표현될 형식 마크업를 정의한 뒤 재사용하도록 하여 (마크업의 작성이나 런타임 마크업 생성 모듈과 같은) 추가적인 개발 작업으로부터 개발을 간편하게 만들어줍니다.

템플릿의 개념 역시도 웹 개발에 있어 새로운 것은 아닙니다. 서버 측에서의 템플릿 활용뿐만 아니라 클라이언트에서도 우리가 주로 사용해오던 여러가지 방법들이 이미 존재합니다. 

예를 들어, "오프스크린" 상에서 DOM을 생성하고 이를 hidden 속성이나 display:none을 사용하여 뷰로부터 이를 감추는 오프스크린 DOM은 브라우저에서 제공하는 다양한 기능을 활용하여 템플릿을 구현할 수 있지만 문서 내의 다른 DOM에 영향을 주는 등의 부작용을 가지고 있습니다. 반대로 <script>를 오버로딩하고 <script>의 컨텐츠를 문자열로 처리하는 스크립트 오버로딩은 렌더링 이슈 및 비활성화를 해결하고 있으나 .innerHTML의 사용을 필요로 하고 이로 인한 보안 취약성이 존재합니다.

WhatWG HTML Templates 표준규격은 템플릿을 위한 표준적인 DOM 기반의 접근 방법을 기술하는 새로운 엘리먼트인 <template>를 정의하였으며 템플릿 컨텐츠는 사용시까지 비활성화되어 렌더링되지 않고 템플릿 안의 스크립트나 DOM이 다른 곳에 영향을 미치는 부작용이 없습니다. 선언/재활용 역시 마찬가지이며 또한 적용 위치 역시 자유롭기 때문에 많은 부분에서 활용이 가능합니다.


> 새로운 엘리먼트의 동적인 등록 - Custom Element


웹은 문서의 구조적인 형식을 가지고 있지만 HTML 엘리먼트가 미리 정의된 엘리먼트에 대해서만 사용 가능하다는 문제로 앞에서도 얘기한 현재에도 웹앱을 구축하는데 있어서는 많은 이슈를 안고 있습니다. <div>가 끝도 없이 중첩되어 나타나는 <div> Soup가 대표적인 예입니다. 이를 기본적으로 해결해주는 기능은 Shadow DOM이라고 할 수 있습니다만, Custom Element는 사실 Web Components에서 가장 중요한 기본 API입니다.

Custom Element는 HTML의 엘리먼트를 사용자가 문서에서 확장하여 사용할 수 있도록 기능을 제공하고 있습니다. 즉, 모든 웹 개발자들이 새로운 타입의 HTML element를 정의할 수 있도록 하여 본질적으로 최종 개발자들이 Web Components를 쉽게 사용하기 위한 방법들을 제공한다고 볼 수 있습니다.

Custom Element는 새로운 HTML/DOM 엘리먼트뿐만이 아니라 다른 엘리먼트를 확장한 엘리먼트를 만들 수도 있고 하나의 엘리먼트에 사용자 지정 기능을 제공하는 방법을 논리적인 형태로 정의하거나 이미 존재하는 DOM 엘리먼트의 API 기능 자체를 확장하는데 사용할 수도 있습니다. 만약 여러분께서 Shadow DOM을 이용하여 복잡한 내부 구조를 가지는  웹 컴포넌트를 개발한다고 해도 Shadow DOM을 사용하도록 정의하는 Custom Element를 정의한다면 마치 '<itemlist type="card">' 형태로 단순화하여 사용자에게 전달할 수 있다는 뜻이기도 합니다.

> 웹을 위한 #include - HTML Imports


웹에서 각기 다른 형태의 리소스들은 개별적으로 로딩을 위한 메커니즘을 가지고 있고 이를 통해 개별적인 리소스에 대해서는 지속적으로 재사용 가능한 사례를 제공하고 있습니다. 그러나 웹의 기본 리소스인 HTML, CSS, 자바스크립트에 대해서도 그렇다고 생각할 수 있을까요?

<iframe>의 경우 사용이 가능하며 실제적인 방법이지만 무겁고 세부적인 제어에 있어서는 굉장히 큰 노력을 필요로 하면서도 결국 불가능한 부분들이 있습니다. 그외에도 Ajax를 사용하거나 <script> 태그를 응용한 각종 핵(hack)이 존재합니다. 동작을 위한 정말 굉장한 노력을 필요로 하는 웹 컨텐츠(HTML/JS/CSS 등)에 대해 하나의 패키지처럼 관리하며 로딩할 수 있는 메커니즘이 있다면 어떨까요?

HTML Imports는 HTML 문서를 다른 HTML 문서들에 가져오기 위한 방법이며 CSS, JavaScript 등의 어떠한 문서 리소스도 손쉽게 가져올 수 있습니다. 다시 말해서 Shadow DOM이 형태를 정의하고 Custom Element가 엘리먼트를 손쉽게 사용할 있도록 한다면 HTML Imports는 분산되어 있는 웹 컴포넌트 리소스를 불러올 수 있는 기능을 제공합니다. 컴포넌트를 배포의 경우는 말할 필요도 없을 것입니다.


웹 컴포넌트가 왜 중요한가?


여기까지 읽어보셨다면 웹 컴포넌트가 왜 중요한지는 이미 눈치채셨을 것이라고 생각합니다. '재사용성'을 기반으로 한 개발, 배포 및 유지보수의 편의성은 개발자에게는 다른 것들과 바꾸기 힘든 가치일 것입니다. 아마 앞으로는 웹 컴포넌트를 여러분이 쉽게 사용하기 위한 많은 서비스들이 나올 수 있을 것입니다. 배포와 삽입, 사용이 쉬워졌기 때문이죠. 게다가 일부 이슈가 있기는 하지만 현재도 이를 사용할 수 있도록 해주는 폴리필 기술들은 분명 축복이라고 할 수 있습니다.


도구들


웹 컴포넌트가 새로운 기술이라면 이를 지원하기 위한 많은 도구들 역시도 쉽게 찾을 수 있습니다. 최신 브라우저에서도 웹 컴포넌트 지원은 아직 진행 중인 사항이지만 우리는 웹 컴포넌트를 위한 폴리필 라이브러리인 Polymer나 X-Tag를 이용한 Brick을 쉽게 찾을 수 있습니다. Yeoman은 빌드를 위한 Grunt, 의존성 관리를 위한 Bower, 작업 흐름을 관리하기 위한 Yo를 통합하고 있는 도구입니다. 필요하다면 이러한 도구들을 이용하여 폴리필 라이브러리부터 여러분의 개발흐름까지도 손쉽게 개선할 수 있을 것입니다.


앞으로를 예상해봅시다.


예전에 GUI 개발이 일반화되던 시절 많은 회사들과 개발자들이 앞다투어 컴포넌트를 제공했습니다. 이는 그 당시의 프레임워크나 플랫폼들이 이를 지원하는 기술적인 기반을 제공했기 때문이기도 합니다. 웹 역시도 이미 오랜동안 그러한 시도들이 있어왔습니다만 이제 좀 더 유려한 방식으로 이를 지원할 수 있게 되었습니다. 여러분이 게시판의 아이템을 확장하기 위해 태그들을 다시 수정하고 이를 검토한 뒤에 실제 프로젝트에 적용하고 테스트하는 과정은 분명히 간소화될 수 있습니다. -언제나 새로운 기술과 방법들은 버그나 문제점을 만들었지만 이는 가치에 비하면 분명 사소한 것들입니다. 게다가 우리가 경험적으로 알고 있다시피 버그와 문제점들은 언제나 개발자의 가장 친한 친구입니다! 아, 그렇다고 화내지 마세요. :)-

이제 여러분은 이미 만들어 놓은 컴포넌트를 사용하여 보다 빠르게 웹 페이지를 개발할 수도 있고 유지보수를 페이지 기반이 아니라 컴포넌트 기반으로 옮겨갈 수도 있습니다. 혹은 잘 만들어 놓은 컴포넌트를 배포하여 수익을 만들어 낼 수도 있겠죠. 이 모든 것들의 뒤에는 퀩 컴포넌트가 있습니다. 아래의 링크들을 읽어보시고 사용해보시고 적용해보세요. :)


읽어볼만한 글들


Web Component Tutorials

Improving Workflow

링크모음