클래스란 클래스는 다 모여 있는 클래스101의 Web
[코드스테이츠 PMB 10기] 프론트엔드 Front-end
기획자의 시선으로
클래스101 프론트엔드 탐색하기
1. 개발을 아는 기획자
개발자, 그들은 대체 어떤 삶을 살고 있는 걸까...개발자는 왜 다 안 된다고만 할까? 팀과 고객을 위해 기획안을 열심히 작성해서 내밀었는데, 개발자가 '안 된다'만 반복하면 기획자 입장에서도 힘이 빠질 수밖에 없다. 그러나 개발자에게도 사정은 있다. 기획자는 개발자를 이해하고 소통할 수 있어야 하고, 그러기 위해서는 개발을 알아야 한다. 한마디로 기획자는 개발팀의 사정과 상황에 무관심해서는 안 된다.
이전 포스팅 <카카오 이모티콘의 데이터는 어떻게 흐를까?>(참고)에서 기획자에게 데이터베이스에 대한 이해가 필요한 이유를 설명하면서 유사한 내용을 언급한 적이 있다. 애써 만든 기획이 자꾸 거절당하는 상황에 기분이 좋지 않은 건 기획자 뿐만이 아니다. 개발자 역시 처음에는 설명해줄 마음이 들다가도 이런 상황이 반복되면 '이 사람은 이해할 마음이 없구나'라며 대화를 포기하게 된다.
사람은 결국 자신의 분야에 대한 지식이 어느 정도 있는 사람과 대화하기를 선호한다. 특히 공동의 목표를 달성해야 하는 직장에서라면 더더욱 상대의 분야에 대한 이해가 긴요하다. 개발자는 서비스 기획자/PM/PO가 가장 많이 소통하는 직군 중 하나이므로, 기획자는 개발을 이해하고 공부할 필요가 있다. 이때, 단순히 개발용어를 아는 것 뿐만 아니라 관련된 배경 지식을 잘 이해하고 있어야 한다.
기획 하기도 바쁜데
코딩까지 배우라고?
하지만 IT 산업에서 일하는 기획자에게 필요한건 파이썬이나 자바가 아니라 커뮤니케이션이라는 점을 잊으면 안 된다. 다시 말해 '개발을 이해하고 공부할 필요가 있다'는 말을 '코딩을 할 줄 알아야 한다'는 말로 곡해하지 말라는 뜻. (어그로성 소제목 죄송합니다...^-^)
일례로 서비스의 기술 스택을 이해하고 있는 기획자는 우리 서비스의 가능성과 한계를 이해하고 상황에 맞는 솔루션을 제공해줄 수 있다. 시간적·금전적인 제약이 있는 상황에서 리스크를 감수할 수 있는 기업이 세상에 얼마나 될까? 만약 각 기술 및 사용 환경을 전혀 모르는 상태로 기획에 돌입한다면 추후 문제 상황 발생 시 팀에 상당한 부담을 안길 수 있다. 결론적으로 팀원과의 커뮤니케이션 뿐만 아니라 리스크 관리를 위해서라도 기획자는 개발을 공부해야 한다.
2. 프론트엔드 탐색하기
그래서 오늘은 온라인 클래스 플랫폼의 최강자, 클래스 101의 프론트엔드를 탐색해보기로 했다. 클래스 101은 "모두가 사랑하는 일을 하며 살 수 있는 세상을 만듭니다"라는 비전을 바탕으로 론칭 3년 만에 11만 명의 크리에이터, 3800만 명의 사용자들, 97%의 클래스 만족도라는 성과를 달성했다. 국내를 비롯해 전세계 72개국에 서비스되고 있으며, 취미, 재테크/창업, 직무 교육, 키즈 등의 다양한 클래스부터 크리에이터 커머스 서비스, 무제한 월정액 구독 서비스까지 다채로운 서비스를 제공하고 있다.
클래스 101은 웹/앱을 모두 지원하는 서비스이다. 최근에는 대부분의 서비스들이 모바일 웹이나 앱을 기반으로 운영된다. 그러나 클래스 101은 적응형 웹을 지원한다. 클래스 101의 서비스 특성 때문일 것이다. 새로운 클래스를 수시로 업데이트 해야 하는 온라인 클래스 플랫폼처럼, 사용자에게 방대한 데이터를 보여주어야 하는 웹사이트는 반응형보다는 적응형이 유리하기 때문이다. 그리고 내가 아직까지 클래스 101 앱을 다운받은 적이 없기에(...) 프론트엔드 분석을 해보기 좋은 서비스라고 생각했다.
'프론트엔드'란?
IT 서비스의 사용자는 웹/앱을 통해 클라이언트에 접속하고, 클라이언트에 여러 기능을 조작하면서 서버에 정보를 주고 받는 요청을 보낸다. 이때 클라이언트 부분을 묶어 프론트엔드(Front-end)라고 부른다. 그중에서도 웹은 크게 3가지 기술로 구성되는데, 각각 HTML, CSS, Javascript 로 나뉜다.
<프론트엔드(웹) 큰그림 뿌셔먹기>(참고)의 비유를 참고하자면 HTML은 문서의 뼈대, CSS는 문서를 꾸며주는 살갗이고, JS 는 문서를 동작하게해주는 근육이라고 볼 수 있다. 같은 포스팅에 설명된 HTML, CSS, Javascript의 역할을 참고하여 클래스 101의 랜딩 페이지 중 크리에이터 지원 페이지*를 분석해보려고 한다.
* 클래스 101의 메인 페이지를 분석하려고 했으나, 해도해도 데이터가 너무 많았습니다...!!! 최대한 많은 클래스에 대한 정보를 사용자에게 제공하려다 보니 스크롤이 끝나지가 않아서, 용량 및 시간 관계상 크리에이터 지원 페이지만을 분석해보기로 했습니다.
HTML
기본적인 element(텍스트, 링크 등)들을 적용한다.
HTML은 <요소이름>내용</요소이름> 과 같은 형태로 문서를 이루는 내용이 어떠한 요소들인지를 나타낸다. 크롬 개발자 도구를 활용해서 위와 같이 크리에이터 지원 페이지의 <header>, <main>, <footer>를 구분할 수 있었다. 오른쪽 영역의 코드에 마우스를 갖다대면 왼쪽 영역에 해당 요소가 파란색으로 표시된다. <header>, <main>, <footer>는 <body>에 속한다. <body>는 실제 화면에 나타나는 문서 본문에 해당한다.
<header>는 웹의 최상단 부분으로, 주로 사이트의 이름, 검색창, 네비게이션 등의 내용이 포함된다. <main>은 본문 영역으로, <header>와 <footer>를 제외한 모든 내용의 부모 요소이다. 마지막으로 <footer>는 웹페이지의 최하단 부분으로, 상호명, 연락처, 개인정보처리방침 등의 내용이 포함된다.
CSS
element들에 색깔, 크기, 배치 등 디자인을 씌운다.
CSS는 HTML이 어떠한 모습으로 표현될지 각 요소들의 표시방식을 정의한다. 위 사진을 참고하면 클래스 101의 크리에이터 지원 페이지는 HTML에 CSS를 적용할 수 있는 방법들 중 HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣는 Internal Style Sheet을 선택한 것으로 보인다.
실험을 위해 위 CSS 코드 중 하나를 지워봤다. 그랬더니 위 사진처럼 디자인 요소가 씌워지기 이전의 모습을 확인할 수 있었다. 확실히 줄 간격, 폰트, 구분선 등의 심미적인 요소가 제거되니 <footer>의 자주 묻는 질문 영역이 안 예뻐졌다(...).
Javascript
웹의 모든 동작을 처리한다.
Javascript는 동적으로 컨텐츠를 바꾸고, 멀티미디어를 다루고, 움직이는 이미지 그리고 꽤나 많은 다른 일들을 할 수 있는 스크립트 언어이다. 화면이 로드될 때 마이페이지 정보를 API 서버에게 요청하거나, 버튼을 클릭하면 button에 적용된 Javascript 코드가 실행되는 등 다양한 작업을 수행할 수 있다.
그렇다면 클래스 101의 크리에이터 지원 페이지에서 Javascript가 쓰인 부분은 어디일까? 사실 Javascript는 웹의 모든 요소를 떠받들고 있는, 우리 인체의 심혈관계나 다름 없는 기술이다. 그래서 보다 효과적인 설명을 위해 크리에이터 지원 페이지 내 로그인 기능을 예시로 들기로 했다.
우측 상단의 [로그인] 버튼을 누르면 위와 같은 로그인 페이지가 등장한다. 이 로그인 페이지에서 사용자에게 노출되는 로그인 화면은 HTML과 CSS로 만들어졌다. 그러나 사용자의 로그인이 성공했는지, 실패했는지, 실패했다면 그 이유는 무엇인지, 실패 횟수를 초과했는지 등의 로그인 과정을 구현하는 것은 Javascript의 일이다.
로그인 단계에서의 HTML, CSS, Javascript에 대한 설명을 이미지로 만들어보자면 위와 같다. 오른쪽과 같이 아이디 또는 비밀번호를 잘못 입력하였을 경우, 이와 같은 변수를 정의하고 경고창이 뜨도록 하는 것은 Javascript의 영역이다.
사실 이전에 외주 홈페이지를 제작하는 과정에서 생활코딩에서 HTML과 CSS 지식은 가볍게나마 학습해뒀는데, Javascript는 '웹에서 동적인 영역을 담당한다' 외에는 알고 있는 정보가 거의 없었다. 어려운 내용이지만 이번 기회에 새롭게 학습할 수 있어 다행이라고 생각한다. 그리고 개발은 역시... 전문가에게 맡기자! ^---^;;;
참고자료
