폴인(fol:in)의 프론트엔드 요소 분석
[코드스테이츠 PMB 11] Ep24. 프론트엔드 Front-end
IT 제품은 IT 서비스를 제공하기 위해서 만들어야 하는 웹, 앱, 서버 등 폭넓은 의미로 사용된다. 그래서 IT 회사에서는 서비스를 개발할 때 제품을 개발한다고 이야기한다. 실제로 IT회사에서 제품을 개발할 때 어떤 방식으로 진행하게 될까? 이 프로세스를 잘 파악하고 있다면 개발자가 어떤 일을 하는지 파악할 수 있을 것이다.
어쩌면 "버튼 하나 바꾸는 것도 개발자는 왜 귀찮아할까?"라는 단순 질문에 대해 그들의 입장에서도 생각해볼 수 있지 않을까.
웹 애플리케이션을 구축하거나 모바일 앱을 만들 때 프론트엔드, 백엔드 개발은 필수적인 부분이다. 이 용어들을 이해하기 위해서는 IT 서비스의 구조와 동작을 먼저 이해할 필요가 있다.
IT 서비스에는 기본적으로 서비스를 사용하는 사용자가 이용하는 IT 기기인 '클라이언트'와 서비스를 제공하는 컴퓨터인 '서버'로 이루어져 있다. 서버에 모여있는 정보와 클라이언트에서 입출력되는 정보가 네트워크를 통해 연결되어 특정한 기능을 하는 서비스를 구성하게 된다.
사용자는 웹이나 모바일을 통해 클라이언트에 접속하고, 클라이언트에 여러 기능을 조작하면서 서버에 정보를 주고받는 요청을 보낸다. 그러면 서버 컴퓨터에서는 필요한 정보를 데이터 베이스에 가져오고 저장하면서 원하는 기능과 결과물을 다시 클라이언트에게 보내준다.
이때 클라이언트 부분을 묶어 '프론트엔드', 서버 부분을 묶어 '백엔드'로 나누고 각 부분을 담당하는 개발자를 프론트엔드 개발자, 백엔드 개발자, 모두 담당하는 개발자를 풀 스택 개발자라고 부른다.
제품 기능의 구현을 위해서는 프론트엔드와 백엔드. 모든 요소가 필수적이지만 이중 오늘은 프론트엔드 부분을 자세히 다루어 보고자 한다.
프론트엔드(Front_end)는 유저가 서비스를 이용하기 위해 사용하는 프로그램인 웹을 뜻한다. 보통 사용자는 브라우저를 통해서 웹을 실행하게 된다. 프론트엔드는 사용하기 쉽고 완전한 기능을 갖춘 인터페이스를 갖추었을 때에만 사용자들의 참여를 이끌어내기 때문에 아주 중요한 요소라고 할 수 있다.
프론트엔드의 3가지 요소
1. HTML
HTML은 Hyper-Text-Markup-Language의 약어로 하이퍼텍스트와 마크업 언어로 구성되어 있다. 하이퍼텍스트는 페이지들 사이의 링크를 정의해 주는 반면에 마크업 언어는 웹페이지의 구조를 정의하는 데 사용된다. HTML은 어떤 내용이 어떤 요소들로 구성되는지 각각의 요소들의 이름을 붙인 문서를 표현하는 뼈대이다.
2. CSS
CSS는 Cascading Style Sheets의 약어로 HTML이 어떤 모습으로 표현될지 각 요소들의 표시방식을 정의한 일종의 살갗이다. 쉽게 말해 개발자가 웹페이지에 다양한 스타일을 적용할 수 있게 해 줌으로써 애플리케이션 페이지를 표시하는 프로세스를 단순하게 만들어주는 디자인 언어이다. CSS는 HTML보다 독립적으로 작동해서 각 웹페이지들을 보완해 준다.
3. Javascript
자바스크립트는 객체 기반의 스크립트 프로그래밍 언어로, 웹 브라우저 내에서 사용하며 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 사용자들을 위해 상호작용하는 애플리케이션을 만들 수 있도록 도와주며, 웹사이트의 기능성을 향상시키고 웹 기반의 소프트웨어 또는 게임들을 실행할 수 있게 해 준다.
보통 PM과 기획자, 디자이너는 개발자와 커뮤니케이션을 잘하기 위해서 개발 용어를 아는 것뿐만 아니라 배경지식들을 잘 이해하고 있어야 한다. 개발자의 영역에 있는 개발 지식과 기술을 습득하는 것이 아니라 소통에 필요한 언어들을 이해하고 협업할 수 있어야 하기 때문이다.
그래서 오늘은 'fol:in(폴인)'의 랜딩 페이지에 담긴 프론트엔드 요소들을 분석해보고 어떻게 구성되어 있는지 살펴볼 것이다.
1. 새로운 영감과 자극을 얻고 싶다면, fol:in
나의 내일을 위한 지식 플랫폼, 폴인
fol:in은 folio + linker의 합성어입니다.
커다란 책을 뜻하는 folio는 깊이 있는 지식을 상징합니다.
현장의 전문가인 linker는 생생한 경험과 인사이트를 전달하는 분들입니다.
폴인은 <중앙일보>의 신사업 중 하나로 2018년에 신설되어 '나의 내일을 위한 지식 플랫폼'이라는 캐치프레이즈를 앞세워, 성장하고 싶은 사람들을 위한 온·오프라인 콘텐츠를 기획·제작하는 콘텐츠 플랫폼이다.
커리어, 브랜딩, 스타트업, 포스트 코로나 등 시의성에 맞는 다양한 테마를 선정한 후 링커라고 부르는, 현업에서 일하는 연사를 초빙한다. 이후 200~300명 대상의 폴인세미나 혹은 20~30명의 소그룹이 3개월 동안 하나의 테마를 공부하는 폴인스터디를 유료로 운영한다. 그렇게 이루어진 활동과 인사이트 등을 정리하여 폴인멤버십이라는 유료 멤버십 형태로 아티클, 뉴스레터 등의 콘텐츠를 제공하고 있다.
사실 유료 멤버십을 구독해 본 적은 아직 없으나, 몇몇 아티클을 미리보기 기능으로 읽어보니 주제에 따라 흥미진진한 내용들과 최신 비즈니스 트렌드들을 알차게 담고 있었다. 평소 잘 알지 못했던 분야의 배경지식을 쌓고 싶거나 커리어 성장에 관심을 가지고 계신 분들에게 많은 도움이 될 것 같다. 이 참에 나도 멤버십을 구독해 볼까 생각 중..ㅎㅎ!
2. HTML : 문서를 이루는 화면 구성요소
HTML은 <요소 이름> 내용 </요소 이름>과 같은 형태로 어떤 요소들로 문서를 이루고 있는 지를 나타낸다. 크롬의 개발자 도구를 활용해서 랜딩 페이지의 <header>, <main>, <footer>를 구분할 수 있었다.
폴인 HTML 기본 요소보통 요소는 <head>와 <body>로 나뉘고, <body>는 다시 <header>, <main>, <footer>로 구성된다. HTML 문서 내부는 <head> 태그와 <body> 태그로 이루어져 있다.
시멘틱 태그가 사용된 HTML 화면구조
인터넷 상의 웹 사이트들을 살펴보면 그 구조가 크게 다르지 않다. 사이트의 제목과 로고, 검색 창 등이 있는 헤더(header) 부분과 여러 내용이 있는 콘텐츠(contents) 부분, 본문 외의 내용을 나타내는 사이드 바(side bar), 그리고 저작권 정보와 제작자 정보를 표시하는 푸터(footer)가 문서의 대부분이며, 사이트에 따라 한두 가지 영역이 추가된다.
1) <header> : <head>는 <html> 바로 밑에 쓰이지만 <header>는 <body> 안에 있기 때문에 둘은 전혀 다르며 주로 머리말, 제목을 표현하기 위해 쓰인다.
2) <nav> : HTML5에서 새롭게 생긴 시맨틱 태그이고 네비게이션이라고 불린다. 콘텐츠를 담고 있는 문서를 사이트 간에 서로 연결하는 링크를 담당한다.
3) <section> : <body> 영역은 콘텐츠를 <header>, <section>, <footer>의 3가지 공간에 콘텐츠를 저장하는데 그중 <section>은 본문 콘텐츠를 담고 있다.
4) <article> : <section>이 콘텐츠를 분류한다면 이 <article> 태그 안에는 실질적인 내용을 넣는다.
5) <aside> : 사이드바라고 부르기도 하며, 본문 이외의 내용을 담고 있는 시멘틱 태그이다.
6) <footer> : 화면의 구조 중 가장 하단에 위치하고, 회사 소개 / 저작권 / 약관 / 제작 정보들이 들어간다.
7) <div> : HTML5에 와서 글자나 사진 등 콘텐츠들을 묶어서 CSS 스타일을 적용시킬 때 사용한다.
<header>
<header> 태그<header> 태그는 브랜딩 영역을 표시하며, 회사의 로고 및 이미지를 포함한다.
폴인의 HTML 요소를 보면 <header> 코드 안에 <top-banner>, <header-box>로 구성되어 있다.
<top-banner>의 하위에는 <top-inner>가, 그 하위에는 <banner-link>가 있고 "폴인멤버십" 링크가 최하위단에 들어가 있었다. <top-banner>와 같은 class에 있는 <header-box> 또한 같은 구조이다.
<nav>, <aside>
<nav> 태그내비게이션 역할을 하는 <nav> 태그는 메뉴 영역에 사용된다. 동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크 모음을 나타내며 이 태그를 사용하면 어느 부분이 내비게이션인지 쉽게 알 수 있다.
<nav> 태그는 내비게이션 메뉴뿐만 아니라 푸터에 있는 사이트 링크 모음 부분에도 많이 사용된다. 그래서 사용하는 위치의 영향을 받지 않아 <header>나 <footer> 태그 또는 <aside> 태그 안에 포함시킬 수도 있고 독립해 사용할 수도 있다.
랜딩페이지에서 스크롤바를 내리면 다른 메뉴(스토리 컨텐츠)와 모임 신청 링크를 확인할 수 있다. 오른쪽 영역에 <nav> 태그를 보면 스크롤바를 내려 다른 링크들을 확인하라는 의미로 스크롤바에 블록 처리가 되어있었다.
<aside> 태그는 로그인, 광고 등 기타 콘텐츠를 포함한다. 또한 <aisde> 태그는 필수 요소가 아니므로 광고나 링크 모음 등 문서의 메인 내용에 영향을 미치지 않는 내용들을 넣을 때만 사용한다.
한 가지 주목할 점은 <nav> 태그가 <aside> 태그 안에 포함되어 있다는 것이었다. 단순히 처음엔 사이드바보다 메뉴 영역이 상위에 위치할 것이라고 생각했는데 오히려 그 반대였고 <nav> 태그는 사용하는 위치에 영향을 받지 않는다는 것을 알 수 있었다.
그리고 왼쪽 화면 최상단을 보면 <aside class="m-gnb">라고 나와있는 것으로 보아 랜딩 페이지의 aside는 모바일에 적용된 네비게이션 바를 담고 있음을 알 수 있었다. 모바일로 폴인에 접속할 경우 aisde(사이드 바)를 확인할 수 있는 것이다.
<footer>
일반적으로 화면 구조에서 최하단에 위치하는 <footer> 태그 안에는 회사소개 / 저작권 정보 / 약관 / 제작 정보를 표시한다.
<footer> - <footer-nav>에 서비스 소개, 회원약관, 운영정책, 개인정보처리방침, 폴인소식, 자주묻는질문, 1:1 문의가 위치해 있다.
그리고 <footer-top> - <footer-notice>에서 '[상시모집] 폴인 객원 에디터 Pool에 등록해주세요!' 문구가 위치했으며, 클릭하면 객원 에디터 상시모집 페이지로 이동할 수 있었다.
2. CSS : 구성요소들에 스타일 적용
CSS란 HTML의 구조에 색깔, 크기, 배치 등 스타일을 씌우는 것이다. CSS가 적용되면 어떻게 보이는지 알고 싶다면 <head> 부분을 지우면 확인할 수 있다. 폴인의 <head> 부분을 지우면 폴인의 랜딩 페이지를 꾸며주던 요소들이 모두 없어진다. <head>의 CSS가 없어지고 HTML 구조만 남아있게 된다.
CSS는 요소 이름{내용}의 형태로 쓰이며, HTML이 어떠한 모습으로 표현될지 각 요소들의 표시방식을 정의한다. CSS를 적용하는 방식은 3가지로 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트로 구분된다.
랜딩페이지 <body> 영역에 적용되어 있는 CSS 스타일이다. margin, line-heiht, word-break, color, font-size 등의 요소로 구성되어 있었다. 아래 사진을 통해 CSS 스타일 적용하지 않은 페이지와 스타일을 적용한 페이지를 비교해보자.
CSS 스타일 적용 X
CSS 스타일 적용margin은 바깥 여백을 뜻하며, margin:0을 적용하기 전에는 바깥 여백이 그대로 드러났으나 적용 후 여백 없이 화면이 꽉 채워짐을 알 수 있었다. line-hight은 콘텐츠 제목의 줄 간격과 사진의 세로 폭이 미세하게 더 좁아져 전체적으로 더 짜임새 있어 보였다.
word-break은 텍스트들을 줄을 바꾸면서 표시해야 할 때 텍스트를 어떤 식으로 줄 바꿈 해줄지 정하는 속성이다. 적용 후 중간에 끊기는 단어가 없어 제목과 내용을 한눈에 파악하기 쉬웠다. color와 font-size, font-weight(글자 굵기 지정)는 사실 적용 전, 후에 육안상으로 큰 변화는 느끼지 못했다. font-family는 글꼴을 설정하는 속성으로 미세하게 자간이 줄고, 일부 글자가 굵어졌다.
3. JavaScript : 구성요소들의 특정 동작 분석
JavaScript는 웹의 동작을 구현할 때 쓰이는 언어로 웹 페이지에 상호 작용을 추가하고 복잡한 기능을 처리할 수 있는 프로그래밍 언어이다.
Top 버튼 누르면 화면 상단으로 이동
스크롤을 내려 화면 하단으로 이동했을 경우 Top 버튼을 눌러 화면 상단으로 이동할 수 있는 기능이다. TOP버튼은 스크롤이 생기기 전에는 보이지 않고 스크롤이 생겼을 때만 우측 하단에 나타난다.
"btn-top-wrap on" 버튼에 자바스크립트가 적용되어 있다. 화면 상단에 있을 때는 버튼이 숨겨져 있다가 스크롤을 내리면 버튼이 생성된다.
화살표(< >) 누르면 이전, 다음 슬라이드 이동
<section> 영역에서 왼쪽, 오른쪽 방향으로 이동할 수 있는 화살표 버튼을 누르면 다른 슬라이드를 확인할 수 있다.
button type은 "button"으로 입력, 왼쪽 화살표는 "slide-arrow-prev", 오른쪽 화살표는 "slide-arrow-next"로 표기하였다.
좋아요와 북마크 기능
폴인의 모든 콘텐츠의 오른쪽 하단을 보면 좋아요, 북마크 버튼이 있다. 유저는 콘텐츠에 대한 선호를 표시하고 스크랩 기능을 통해 저장해 놓을 수 있다. 이 두 기능은 로그인한 유저만 사용할 수 있고 회원가입이 되어있지 않은 경우 '로그인해주세요'라는 팝업창이 뜬다.
좋아요와 스크랩 기능을 "user-activity"로 묶어 각 기능을 구현하였다. 좋아요, 스크랩은 콘텐츠에 대한 유저의 선호도를 반영하므로 유저의 활동이라는 범주 안에 포함한 것으로 보인다.
프론트엔드의 요소로 HTML, CSS, Javascript를 뜯어보니 평소에 보던 웹 페이지 화면이 어떻게 구성되어 있는지 감을 잡을 수 있었다. HTML과 CSS에 비해 JS는 특정 요소를 보여주는 것이 아니라 function으로 작성되는 코드이기 때문에 분석하는 데 어려움이 있었다.
큰 틀에서 살펴본 것에 불과하지만 이번 기회에 프론트엔드 구성 요소들을 새롭게 알게 되어 다행이었다. 이럴 땐 개발자에 대한 리스펙이 스멀스멀 올라온다..! 적어도 개발자와 소통할 때 답답한 상황이 생기지 않도록 개발 지식과 React, Node.js 같은 프레임워크도 조금씩 공부해 두어야겠다.
참고자료
https://blog.dalso.org/language/web/6523
https://itstudyblog.tistory.com/368
https://sangyeon96.gitbooks.io/do-it-html5-css3/content/Chapter10-2.html
http://leebh.net/class/dpub1/html-structure.php
http://tcpschool.com/html/html_intro_basic
