트렌드를 읽는 캐릿의 프론트엔드 읽어보기
[코드스테이츠 PMB 11기] 프론트엔드
1. 기획자가 코딩까지 배워야 해?
영어와 개발의 공통점
한국사람은 태어나서 정규 교육과정을 밟는다면 최소 10년 이상 영어를 배운다. 그렇다면 우리나라 사람들은 원어민과 만났을 때 유창하게 대화를 할 수 있는가?
대답을 하자면 NO이다. 위에 이미지와 같이 원어민이 실제로 쓰는 영어와 우리가 교육과정을 지나면서 배우는 영어는 같은 영어인가 싶을 정도로 다른 형태인 것을 알 수 있다. 원어민과 커뮤니케이션을 위해서 배워야 하는 것은 일상생활에서 쓰는 영어지만 실제로 우리나라 교육과정은 커뮤니케이션이 아닌 학문에 가까운 영어를 배우고 있다.
아니 기획자가 개발 배워야 하냐고 제목은 달아 놓고 왠 갑자기 영어 이야기? 싶을 것 같다. 왜 영어 이야기를 먼저 시작했냐면 개발을 위해 배워야 하는 개발 '언어'라는 측면에서 영어와 비슷하다고 생각했기 때문이다.
기획자가 개발을 배워야 하나요?라는 질문에 영어 교육에서 겪은 경험을 바탕으로 대답을 하자면 NO이다. 물론 여기서 배운다는 것은 마치 한국의 정규 교육처럼 직접 코팅을 할 수 있는 수준 이상의 공부를 하는 것을 의미한다. 기획자는 그렇게까지 개발을 배울 이유가 없다. 그렇다고 기획자는 개발을 안 배워도 된다!라는 것을 말하려는 것은 아니다. 기획자가 아무리 고객이 원하는 제품을 기획하더라도 개발자가 알아들을 수 없다면 원하는 대로 제품을 만드는 것은 불가능하다. 여기서 우리한테 필요한 것은 '개발자와 커뮤니케이션할 정도의 개발 지식'이다. 그래서 그게 어느 정도냐고? 당연히 나도 모른다^^... 원어민이랑 대화할 정도의 영어실력은 어느 정도인가?라고 물으면 뭐라고 대답할 것인가. 구구절절 이야기했지만 사실 나도 정답은 모르고, 기획자가 되기를 원한다면서 개발! 코딩! 배워야 해!라고 너무 과몰입할 필요는 없다는 맥락에서 이야기를 시작해봤다.
2. 캐릿의 프론트엔드 뜯어보기
오늘 프론트엔드 뜯기에 동참해줄 서비스는 '캐릿'이다. 캐릿은 MZ세대가 지금 열광하고 있는 트렌드를 캐치해 마케팅 인사이트를 제공하는 웹사이트이다. 주로 트렌드를 알고 싶은 마케터들을 타깃으로 하고 있다. 캐릿을 선택하게 된 이유는 독특하게 앱 서비스를 제공하지 않고, 웹사이트로만 서비스를 제공하고 있기 때문에 웹을 기반으로 프론트엔드를 뜯어보기에 아주 적합한 서비스라고 생각했다.
프론트엔드(Front-end)란?
웹 개발은 크게 프론트엔드(Front-end) 개발과 백엔드(Back-end) 개발로 나뉜다. 여기서 프론트엔드는 사용자가 웹 사이트 또는 웹 애플리케이션의 URL을 입력하거나 모바일 애플리케이션을 다운받을 때 마주하게 되는 모든 인터페이스를 말한다.
여기서 프론트엔드의 개발요소에는 3가지가 있는데 바로 HTML, CSS, JavaScript이다. HTML은 뼈대로 전체적인 구조를 설계하는 역할을 한다. 그리고 CSS는 뼈대에 살을 붙이고, 꾸미는 역할을 가지고 있다. CSS를 통해 웹페이지의 디자인과 스타일을 정할 수 있다. 마지막으로 JavaScript는 웹사이트를 동적으로 만들 수 있는 근육과 같은 역할을 한다.
프론트엔트의 3가지 개발요소를 기반으로 하여 캐릿을 본격적으로 분석해보자!
HTML (HyperText Markup Language)
구조 만들기
HTML은 웹페이지의 뼈대이다. HTML의 형식은 <요소 이름> 내용 </요소 이름> 이렇게 부분으로 나누어진다. 위의 개발자 모드에서 보면 <html>이라는 요소 안에 <head>와 <body>로 구성되어 있고, </html>로 이 페이지가 마무리되어있음을 확인할 수 있다.
그중 <body>는 말 그대로 웹페이지의 몸체를 말한다. 그래서 <body> 안에는 <header>, <main>(or <contents>), <footer>로 구성되어있다. 각각의 부분을 전체 페이지에서 나누면 위 이미지와 같다. header 영역은 기업의 로고와 상단 메뉴 등이 구성되어있고, main은 웹사이트에서 주로 보여주고자 하는 본문 영역에 해당한다. 마지막으로 footer 영역에서는 기업정보나 약관 등 기업에서 기본적으로 제공해야 하는 정보들로 구성되어있다.
CSS(Cascading Style Sheets)
웹사이트 스타일 지정
이미지를 클릭하시면 크게 보실 수 있습니다!CSS는 뼈대인 HTML 위에 디자인을 입힐 수 있는 기능이다. 왼쪽 이미지는 개발자 모드에서 'CSS'를 찾아서 연두색으로 체크를 해뒀다.
그리고 CSS가 들어간 3가지 요소를 다 삭제하니 오른쪽 이미지처럼 변하는 것을 확인할 수 있다. 한눈에 봐도 캐릿에 있던 예쁜 폰트나 디자인적인 요소는 다 사라지고, 링크를 연결하는 하이퍼링크식으로 다 변한 것을 확인할 수 있다.(CSS가 빠지니 디자인이 이상해졌다.)
JavaScript
상호 작용 증가
개발자 모드에서 JavaScript는 <Script>로 표현되어 있는 것을 확인할 수 있었다. 연두색 박스로 되어 있는 부분을 보면 가장 위에 "hdsearch"로 그 아래 관련된 Script 가 붙어있는 구조이다.
뭔가 복잡한 영어가 있어서 어려워 보인다. 나의 얕은 지식으로 뜯어본다면 위의 검색바에서 아무것도 입력하지 않고 검색하기를 클릭한다면 (if (srhtxt.replace(re, " ") == "") '검색어를 입력해주세요'라는 팝업창이 뜬다.(alert('검색어를 입력해주세요'))라고 구성이 되어있는 것 같다.(추측) 실제로 아무것도 입력하지 않고 검색을 하면 위 이미지와 같이 검색어를 입력하라는 알람 창이 뜨는 것을 확인할 수 있다.
난 개발의 ㄱ자도 모르는 사람이다... 그래서 오늘 과제를 하려고 했으면 엄청 오랜 시간을 투자해서 공부를 해야 했을 것이다. 그러나 함께 북클럽을 하는 동기 분들 중에 퍼블리싱을 해보셨던 분의 아주 쉬운 설명 덕분에 쉽게 이해하고 과제를 할 수 있었다!! 근데 내가 잘했는지는 잘... 이 글을 보실지 모르겠지만 감사의 말씀을 전한다ㅎㅅㅎ 더하여 생각보다 프론트엔드에 대해서 공부하는 것은 재밌었다! 개발... 너무 어려웠지만 기초부터 천천히 배워간다면 해볼 만하다는 생각을 하게 되었다. 앞으로 더 열공하자!
