YouTube 클론 코딩으로 알아보는 클라이언트 구조
[코드스테이츠 PMB 10기] 프론트엔드 개발 지식 쌓기
비전공자였던 나는 대학교 졸업 전 처음으로 IT 세계에 입문하게 되었다.
막 학기를 다니며 6개월 동안 프로그래밍 국비교육을 받으면서 매달 java, python, html/css/js, 머신러닝 등 새로운 언어와 기술을 배우고, 프로젝트를 하며 정말 쉴 틈 없는 시간을 보냈다. 4년 동안 배운 전공보다 6개월 배운 프로그래밍이 나에게는 더 잘하고 싶은 욕심을 내게 만들었다. 수료 후 '내가 해야 할 일은 개발자다'라는 마인드가 자동으로 세팅되어 있었고, 개발자로 취업을 하겠다는 의지로 앞만 보고 달렸다.
그런데 취업 과정과 실무를 접하다 보니 내가 잘할 수 있는 일은 조금 다른 분야라는 것을 깨달았다. 나는 디자인과 UX에 관심이 많아졌고, 사용자와 기기의 인터랙션 하는 부분을 설계한다는 HCI 학문에 매료되어 석사까지 해보고 싶다는 꿈을 가지게 되었다. 그래서 지금 PM으로 커리어를 쌓고자 부트 캠프에서 공부하고, 기획자로서 역할을 잘 해내기 위해 노력하고 있다.
하고 싶은 일을 찾기까지 많이 돌아서 온 듯하나 그때 프로그래밍 교육을 받지 않았더라면 아마 나는 다른 일을 하고 있을 것이다. 지금까지의 내가 있어서 지금 PM으로서 좋은 역량을 갖추게 된 것 같다. 이제는 개발자가 아닌 기획자의 시선으로 개발 지식을 공부해야겠다.
Client 개발 이해하기
Front End와 Back End
Front End와 Back End웹 개발은 크게 Front와 Back으로 나눠진다.
프론트 엔드 개발자는 사용자에게 보이는 웹 애플리케이션을 만드는데 우리가 서비스를 이용하면 바로 만나는 인터페이스, 즉 UI를 만들고 UI/UX에 관련한 로직을 코딩한다. 그 외에도 사용자의 플로우를 기술적으로 개선하고, 애니메이션 효과, 캐시 처리, 성능 최적화를 진행한다.
백엔드 개발자는 서버에서 동작하는 서비스를 만드는 데 데이터와 요청에 따른 빠르고 효율적인 응답을 위해 로직을 설계한다. 예시로 프런트에서 넘어온 고객 정보를 데이터 베이스에 저장 및 관리하고, 몇 명의 유저이든, 언제 요청하든지 불러오는 데이터 정보를 문제없이 제공하는 역할을 한다.
브라우저의 주요 기능
브라우저 기본 구조프론트 엔드 개발에 대해 공부하려면 chrome, edge, firefox, safari 등 단순히 인터넷 창으로서 역할이 아닌 브라우저의 주요 기능과 동작 과정에 대해 이해하고 있어야 한다. 브라우저는 사용자가 선택한 자원을 서버에 요청하고 다시 브라우저에 표시한다. 여기서 자원은 보통 HTML을 말하고 이미 지나 pdf 형태일 수 있다. 브라우저는 HTML, Css을 해석하는데 W3C(World Wide Web Consortium)에서 정한 표준 명세에 따르고, 서로 좋은 점을 벤치마킹하다 보니 브라우저의 UI를 보면 주소 표시 줄, 이전과 다음 버튼, 새로고침, 홈 버튼 등 서로 유사한 모습이 되었다.
브라우저 구조를 살펴보면, 사용자 인터페이스에서 우리가 볼 수 있는 화면을 제공하고 브라우저 엔진이 UI와 렌더링 엔진 사이의 동작을 제어한다. 렌더링 엔진은 요청받은 화면을 HTML 문서로 표시하는 역할을 하는데 프론트엔드에서 중요한 개념인 렌더링과 DOM을 이해하는데 중요한 지점이다.
렌더링 엔진은 HTML 문서를 파싱 하고 트리 내부에서 태그를 DOM 노드를 변환한다. 그다음 CSS 파일과 스타일 요소 모두 파싱 한다. 렌더링은 어떤 것을 만들다는 의미로 브라우저에서 HTML, CSS, JS를 읽어서 웹페이지의 모습을 기기 화면에 나타내는 것을 말하고, 파싱이란 문서의 내용을 토큰(token)으로 분석하고, 문법적 의미와 구조를 해석해 실행 가능한 상태로 변환하는 것을 말한다. 한마디로 HTML 태그를 토큰화 시켜 해석하고 클라이언트단에서 실행될 수 있는 상태로 만드는 과정이라고 생각하면 된다.
DOM은 Document Object Model의 약자로 클라이언트 요청에 HTML의 태그들이 배치, 디자인 등을 조작할 수 있는 상태를 말한다. 이 상태는 자바스크립트에서 접근할 수 있는 HTML의 태그 트리로 구성된 객체(Object) 또는 객체의 집합을 의미한다. DOM은 프런트엔드 개발 언어 HTML, Css, JS와 동작 구조를 이해하는데 필수적인 개념이니 잘 알아 두어야 한다.
프런트 엔드 개발 언어 - HTML, CSS, JavaScript
출처 유튜버 드림코딩 엘리프론트 엔드는 기본적으로 3가지 언어로 개발된다.
브라우저는 HTML, CSS, JavaScript로 구성된 웹 페이지를 보여준다.
먼저 html, css는 렌더링 엔진을 통해 실행되고, js는 자바스크립트 엔진에 의해 실행된다.
html은 웹의 뼈대를 구축하는 과정으로 html 태그로 header, section, footer 등 sementic 태그로 마크업을 한다. 그 후 html 태그에 class, id를 css에서 적용시켜 화면에 보이는 디자인적 요소를 완성한다. 그리고 동적인 요소, 백엔드 api 요청으로 데이터 값이 필요한 부분을 js 코드로 실행한다.
여기에 더해서 더 효율적인 개발을 위해 라이브러리, Vue, React, Angular 같은 프레임 워크가 생겼고 크로스 플랫폼을 개발할 수 있는 리액트가 가장 인기 많다.
반응형 웹 개발을 위한 디바이스 별 사이즈
스마트폰 시대에 들어서면서 데스크톱 사이즈로만 봐왔던 웹 페이지를 기기 별 화면 크기에 맞춰 개발하기 시작했다. 하나의 웹으로 모든 디바이스 크기에 대응할 수 있는 웹을 반응형 웹이라고 한다. Css 미디어 쿼리를 사용해서 화면 사이즈 별로 어떤 요소를 바꿔서 적용할 건지 지정한다. 주로 사용되는 데스크톱 사이즈는 최소 1024px 이상, 태블릿은 768px, 모바일은 360px 정도이다.
YouTube 클론 코딩 (Clone Coding)
이전에 프론트엔드 개발 공부를 하면서 즐겨 보았던 유튜버 드림 코딩 엘리에 있는 유튜브 클론 코딩을 해보았다. 코딩을 직접 해보면서 개발 과정을 몸소 느낄 수 있었고, 개발 지식을 이해하는데 더 도움이 되었다.
웹 화면 구성요소 나누기 (components)
유튜브 웹 화면 Components유튜브 웹 화면 구성요소를 하나씩 나눠 보았다. header에는 유튜브 로고, 햄버거(메뉴) 아이콘, 검색창 등이 있고, 중간 section에는 동영상 화면, 타이틀, 좋아요/공유/저장 아이콘, 구독 버튼 등이 있다. 데스크톱 화면에서는 다음 영상 리스트가 오른쪽에 배치되어 있었고, 모바일에서는 동영상, 동영상 정보 아래에 다음 영상 리스트가 배치되어 있었다. 이렇게 나눠보면서 html 마크업을 어떻게 구성해야 할지 감을 잡을 수 있었다.
클론 코딩으로 완성된 웹 화면
완성된 모습클론 코딩으로 유튜브 뮤직 플레이어 채널과 유사한 화면을 만들어 보았다. html, css로 각 컴포넌트들을 어디에 배치하냐에 따라 사용자의 동선이 바뀐다는 것을 알았고, 화면 설계 시 개발적인 부분까지 고려할 수 있게 되었다.
js는 버튼을 클릭하면 아이콘 컬러가 바뀌는 기능, 텍스트가 많은 부분은 토글로 줄일 수 있는 기능 등 사용자가 겪는 문제를 해결하고, 다이내믹한 요소를 넣어서 사용자 경험이 더 좋아지도록 만드는 역할을 했다. 화면 기능 개발 요구사항을 JS 코드에 따라 더 디테일하게 정의해야겠다는 생각이 들었다.
HTML
CSS
Java Script
( 동영상 정보 토글 기능 )
