티스토리 뷰
안녕하세요?? 오늘부터 야메의 이상한 생각과 공감 블로그의 필진을 맡게 된 미시깽 입니다. 2013년 올해까지 대략 14년간 아이러브스쿨, 네이트, 정부 산하기관 등을 거치면서 다양한 카테고리의 서비스 개발을 진행해왔는데요.. 그간 수 많은 개발 이슈를 접하고, 그 보다 훨씬 많은 협업 대상자들과 일을 하면서, 경험했던 다양한 케이스들을 바탕으로 개발자의 관점에서 바람직한 기획자의 방향을 정리하고자 하니, 많은 관심 바래요..^^;
오늘은 워밍업 차원에서 개발자가 보는 기획이란 주제로 포스팅을 해볼까하는데요, 우리가 하루에도 열두번씩 쳐다보게 되는 웹 서비스 환경을 알아보고, 이를 통해 기획자가 하나의 서비스를 기획하는데 알아두어야 할 개발 베이스 지식들을 정리해볼께요.
우선 우리가 자주 접하게되는 웹 서비스... 하지만, 정작 웹 서비스를 오래 개발해 왔던 기획자나 개발자가 사전적인 정의를 알고 있는 경우는 드문 편인데요, 썰을 풀기에 앞서 웹 서비스에 대한 사전적 의미를 먼저 살펴보겠습니다.
웹 서비스는 논리적 응용 프로그램의 단위로 데이터와 서비스를 다른 응용 프로그램에 제공하고 응용 프로그램의 작성 시 HTTP나 XML, SOAP와 같은 표준화된 웹 프로토콜과 데이터 형식을 사용함으로써, 운영 체계(OS) 등 특정 플랫폼과 상관없이 모든 컴퓨터 간 원활한 데이터의 흐름을 보장해 준다. 웹 서비스를 활용하면 어려운 프로그램 작성 언어를 배우지 않고도 간단하게 여러 가지 웹 서비스들을 조합하여 새로운 애플리케이션을 만들어 낼 수 있다. - IT용어사전 발췌
IT 용어사전의 웹 서비스에 대한 정의... 어려운 전문 용어를 섞어놓아서 이해하기 어렵죠? 막연하게 이해하고 있던 저 조차도 이러한 정의가 무엇을 의미하는지 이해하기가 무척 어려운데요.. 사실 웹 서비스는 사람들이 눈으로 보고 있는 "웹사이트", 그리고 그 웹사이트를 서비스하는 성능 좋은 대용량 "웹 서버" 여기에.. 각종 데이터가 저장되어있는 "데이터베이스"와 그들이 서로 통신할 수 있도록 통신수단 역할을 해주는 "네트워크"라는 눈에 보이지 않는 띠에 묶여 있는 한 덩어리(?)라고 생각하시면 될 듯 합니다.
이러한 환경에서 기획자들은 눈으로 보이는 여러 가지 웹 관련 서비스들을 그림 그리는 것이고, 개발자들은 그런 그림들을 실질적인 모습으로 볼 수 있도록 만들어내는 역할을 한다고 생각하시면 됩니다. 조금 더 곁들이자면 그 뒤에 물리적인 저장공간을 관리해주는 서버 엔지니어와 서비스를 원활히 할 수 있도록 네트워크 엔지니어가 보이지 않는 것들을 위해 각자의 역할을 하고 있습니다.
기획자의 입장에서 '웹을 만든다'에 한정지었을 때, 눈에 보이는 웹 서비스를 그려내는 역할이라는 점에는 동의하지만 사업의 측면에서는 보다 많은 범위를 고민하는 포지션이 기획자의 포지션 입니다.
기획자 여러분들이 만들고, 사용자들이 직접 접하게 되는 웹 사이트는 웹 서비스 환경에서 가장 눈에 띄는 영역이고 그렇게 때문에 가장 중요한 영역이라고 할 수 있는데 이 중요한 영역을 잘 만들어내기 위해서 다양한 기획적 이론이나 지식들이 잘 갖춰지는 것도 중요하지만, 적어도 내가 어떤 곳에 그림을 그리는 것인지에 대한 이해를 2% 더 채워놓으면 그림 그리기가 더 수월해질 수 있지 않을까 생각됩니다.
그래서 오늘은 웹 서비스 환경에서 기획자가 서비스 기획을 할 때 베이스로 알아두어야 할 개발요소 몇 가지를 정리해 볼까 합니다.
인터넷이 처음 보급되고 인터넷 익스플로러라는 브라우저가 생긴 이래, 지금까지 사용되는 아주 기본적이고 대표적인 웹 프로그래밍 언어 세 가지가 있습니다.
웹서비스의 뼈대이자 기본 틀이라 할 수 있는 "html"과 웹서비스를 꾸며주는 메이크업 도구 "CSS" 그리고 웹서비스의 성실한 가이드 "Javascript"가 그것인데 새로운 기술이 나오고 모바일이 대세가 된 현재의 시점에도 버전만 다를 뿐 여전히 현업에서 사용되고 있는 주요 프로그래밍 언어라 할 수 있겠습니다.
먼저 프로그래머나 오래된 경력자가 아니어도 웹 페이지가 "HTML"로 이루어져 있다는 건 많이들 알고 계실거라 생각됩니다. 본인이 직접 블로그를 운영했거나 혹은 카페 게시판을 보다 다이나믹하게 이용하신 분들이라면 에디터를 통해서도 "<html>"로 시작하는 언어들을 보신 적이 있으실테고요.
이런 독특한 스타일의 웹사이트도 HTML이 베이스죠. (https://www.kapitall.com)
가끔 웹 프로그래밍을 하는 개발자들이 이 "HTML"은 알 필요도 없고.. "그런 건 코더가 알아서 한다."고 하거나 "웹 에디터 프로그램이 자동으로 만들어주는 건데.."라고 신경 쓰지 않는 분들도 있습니다만.. 사실 이 HTML 태그 하나하나가 웹 브라우저에 미치는 영향이 생각보다 큽니다.. 겉으로 보기에는 사이트에 아무런 문제없이 운영되는 것처럼 보이지만, 태그 하나 제대로 안 닫아주면 웹에서는 사실 프로그램이 완성됐다고 생각하지 않고 계속 확인을 하게 되기 때문에 불필요한 통신이 발생하게 되고, 보이지 않는 부하를 일으킬 수도 있죠.
단지.. 태그 하나의 오류로 인해 유저의 입장에서 브라우저가 점점 느려져서 인터넷이 느려진 거 아닌가하는 오해를 살 수도 있는 것이죠. 특히 페이지뷰가 많은 사이트일 수록 HTML 태그가 정확히 사용되지 않았다면 불필요한 부하가 발생하게 될 수도 있습니다.
요즘 주위에서 웹접근성 때문에 이야기들이 많은데요, HTML의 기본을 잘 지키는게 웹 접근성의 첫걸음이기도 합니다. 어찌 보면 웹 페이지 구현의 가장 중요한 요소라고 할 수 있겠네요.. 요즘엔 "HTML5" 라는 새로운 버전이 나와있죠. 이전에 비해.. 인터넷 이용에 부하를 주는 류의 다른 프로그램들(실버라이트, 플래시) 설치 없이도 그래픽 효과를 낼 수 있기 때문에 웹 개발자만이 아니라 퍼블리셔 사이에서도 많은 관심의 대상이 되고 있으며, PC Web 뿐만 아니라 Mobile Web에서도 많이 사용되고 있습니다.. 앞으로 어디까지 발전이 이루어질지 모르겠지만, 적어도 향후 10년 가량은 여전히 HTML이 웹의 베이스가 될 것으로 생각하고 있습니다.
앞서 HTML이 웹의 베이스라 한다면, CSS는 이를 꾸며주는 메이크업 도구라고 말씀 드렸는데.. 제가 처음 프로그래밍을 시작했을 때 까지만해도 사실 상 CSS의 영향력(?)은 미미했었습니다. 뭐... CSS 몰라도 웹 프로그래밍하는데 전혀 문제되는 부분이 없었죠. 하지만, 시간이 흐르고.. 기존 HTML을 자유자재로 변환할 수 있는 스타일 시트가 발전하더니 CSS라는 표준안이 만들어지게 됩니다.
CSS 적용에 따른 Before와 after의 차이... 무섭습니다..
"뭐 굳이 이런 것 까지 알 필요 없지..." 라는 의견이 웹 개발자들 사이에서도 처음에는 많이 퍼져있었습니다만, 시간이 지날수록 웹 개발을 하기 위해 HTML을 이해해야 하는 것처럼 CSS의 영향력도 커지게 됩니다. 과거에는 없었던 퍼블리셔라는 새로운 영역이 나타나게 된 것도 이 CSS의 영향력이 아닐까 싶은데요.. HTML에 비해 글자크기, 글자체, 간격, 배열 위치 등 훨씬 웹사이트의 질적 수준을 높임으로서... 과거 HTML 중심의 투박한 웹사이트에 이미지로 이루어진 디자인 이외의 요소로 좀 더 고급스런 느낌이 들게 만들어준 것이 CSS 입니다.
HTML, CSS와 함께.. 웹 서비스를 더욱 디테일하게 꾸밀 수 있는 언어가 바로 자바스크립트 인데요, 우리가 웹 사이트를 이용하면서 흔히 보아 온 "가입하시겠습니까?" "동의하시겠습니까?", "입력하신 정보가 확실한지 한번 더 확인해주세요" 등의 Alert 메시지를 보낼 때 쓰는 대표적인 언어로 객체지향 프로그램인 Java에서 파생되었고, HTML 안에서 기술하여 활용할 수 있습니다.
요즘에는 javascript에서 모바일 환경에서 많이 쓰이는 jQuery나... 전체화면의 새로고침 없이 특정 부분만 새로고침할 수 있는 AJAX 등 Javascript에서 파생된 다양한 스크립트 언어들이 사용되고 있습니다. 오늘은 웹 기획자가 기획을 하는 과정에서 처음 접하게 되는 언어를 정리했는데요, 두 번째편에서는 조금 더 범위를 넓혀서 웹 프로그래밍 언어와 OS에 대해 조금 더 이해하기 쉽게 정리 해 볼 예정이니, 기대해주세요~!!
야메군. Web와 Mobile, Digital 카테고리 SME(Subject Matter Expert). 웹기획 15년차로 네이버 웹기획자 커뮤니티 "웹(WWW)를 만드는 사람들"에서 운영진으로 활동하고 있으며, 딴지일보를 시작으로 아이러브스쿨, 짱공유닷컴, YES24 등의 회사를 거쳐, 현재는 민간 IT 원천기술 연구소 "Valhalla Lab"에서 Pattern recognition과 Machine learning, Natural Language Processing 기술의 상업적 이용방법에 대해 연구했으며, 2016년 7월 7일, 기획자의 업무능력 향상으로 위한 Guide Book "처음부터 다시배우는 웹기획(정재용, 최준호, 조영수 공저)" 출간.
'똘끼의 웹기획론. > 개발자의 기획썰戰!!' 카테고리의 다른 글
| [1편] 웹 개발자가 선호하는 기획자.. 그리고 기획안... (8) | 2013.08.07 |
|---|---|
| [2편] 개발자를 춤추게 만드는 커뮤니케이션 기법. (0) | 2013.08.02 |
| [1편] 개발자도 춤추게 만드는 커뮤니케이션 기법. (4) | 2013.07.27 |
| [3편] 기획자에게 2%부족한 웹 개발 환경 이해!! (6) | 2013.06.30 |
| [2편] 기획자에게 2%부족한 웹 개발 환경 이해!! (1) | 2013.06.27 |