인체에 비유한 잔디 프론트엔드 뜯어보기
잔디로 보는 프론트엔드
직장인들은 이메일, 그룹웨어, 개인용 메신저로 대부분의 업무를 진행하지만 여전히 업무의 불편함을 느낍니다. 첨부 파일을 찾으려면 메일을 일일이 열어봐야 하며 메일함 정리를 하기도 힘듭니다. 심지어 카카오톡을 쓰는 회사는 단체 톡방에 파일을 올려도 유효기간이 만료되어 다시 보내야 하는 불편한 점이 생깁니다.
출처: 잔디이처럼 업무에 있어서 비효율적인 부분은 어느 회사나 다 있습니다. 하지만 이러한 부분을 잔디에선 개선했다고 할 수 있습니다. 잔디는 세계로 뻗어나가는 협업 툴 중 하나인데 이에 대한 랜딩페이지를 인체에 비유하며 분석해봅시다.
랜딩페이지를 분석해보기 전, 프론트엔드에 대해 알고 가야 한다.
프론트엔드란?
사용자는 웹이나 모바일을 통해 클라이언트에 접속한다. 여기서 사용자가 서비스를 만난 접점은 UI이다. 사용자가 클라이언트에서 다양한 기능을 조작하며 클라이언트에서 서버로 정보를 요청하고 서로 정보를 주고받게 된다. 이때 사용자가 사용하게 되는 클라이언트 부분을 프론트엔드라고 부르고 서버 부분을 백엔드라고 부른다. 이러한 웹 페이지에서는 HTML, CSS, JS라는 세 가지 기술 스택만 기억하면 된다.
현재 잔디의 랜딩페이지는 한눈에 무슨 서비스를 제공하는지 알 수 있도록 구성되어있다. 그렇다면 이러한 랜딩페이지를 위에 언급한 세 가지 기술 스택으로 어떻게 분석할 수 있을까?
[ 잔디의 HTML ]
웹 페이지를 인체에 비유하자면 HTML은 뼈대, 신체 골격의 역할을 한다. 즉, 웹 페이지에서 기반이 되는 구조 작업을 하는 스택이다. 특히 콘텐츠의 레이아웃을 제어하고 웹페이지 디자인을 위한 구조를 제공하며 모든 웹페이지의 기본 빌딩 블록을 담당한다.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
</head>
<body>
문서에 표시되는 콘텐츠
</body>
</html>
<head>와 </head> 부분에는 주로 meta, title, link 등의 태그들이 존재한다. 그리고 <body>와 </body> 부분에는 웹 사이트에서 보이는 내용이 존재한다. 웹 페이지에서 보이는 대부분의 내용은 body 태그 안에 작성된다.
잔디의 HTML - <head>
HTML에서 <head>는 말 그대로 '뇌'라고 보면 된다(동기분의 팁). 그렇기에 브라우저 화면에 직접적으로 보이지 않으며, 숨은 데이터를 정의하는 태그들이 들어가게 된다.
잔디의 HTML <head>에는 meta, link, script 태그가 있다.
① meta : 웹 페이지의 보이지 않는 정보를 제공하는데 쓰이는 태그
charset="UTF-8": 유니코드(Unicode)를 위한 문자셋인 UTF-8을 명시
http-equiv="X-UA-Compatible" content="IE=edge": 최신 모드로 지정된 DOCTYPE에 상관없이 IE8 이상 버전에서 항상 최신 표준 모드로 렌더링
name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no": width=device-width -> 기기에 따라 달라지는 장치의 화면 너비에 맞게 웹 페이지의 너비 설정 / initial-scale=1.0 -> 초기 확대값 / user-scalable -> 사용자가 브라우저의 확대 축소를 가능하게 할 것인지 정의
name="naver-site-verification" content="721683db1f58471678fa5cea6475fcd8232baf77": 사이트 등록 및 소유확인 - 네이버 서치어드바이저
property="og:~: 오픈그래프로 웹페이지가 소셜 미디어 또는 오픈그래프를 활용한 사이트로 공유될 때 사용되는 정보
② script : 자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의
태그매니저, 툴
SEO 분석 도구: GA, 구글태그매니저, 구글애드서비스, 스냅, 페이스북 픽셀
③ link : 현재 문서와 외부 리소스 사이의 연관 관계를 명시
스타일시트, 아이콘으로 사용할 외부 리소스를 불러옴
rel="alternate" href="https://www.jandi.com/landing/kr" hreflang="ko": 프린트 페이지나 번역된 페이지로 이동. 현재 잔디는 한국어, 영어, 일본어, 중국어, 태국어 사이트 제공
rel="preload" ~ as="script": 현재 탐색에 사용할 대상 리소스를 미리 가져와 캐시 하도록 명시
④ title
JANDI - 30만 팀이 선택한 1등 협업툴 잔디
앞서 언급했듯이 <head>는 브라우저 화면에 직접적으로 보이지 않는다. 하지만 수정을 하면 바로 확인이 가능한 태그가 title이다. HTML <head>에서 title을 수정해봤다. 수정하자마자 바로 title이 바뀐 것이 보인다.
잔디의 HTML - <body>
동기분이 말한 <head>를 뇌라고 본다면 <body>는 몸통이다. 즉, 문서의 몸통을 나타내는 태그인데 <head> 태그와 대조적이며, 브라우저 화면에 보이는 것들이 주로 들어간다.
그래서 <body>를 지우면 사진과 같이 아무것도 뜨지 않는다. 그렇다면 잔디의 HTML <body>는 어떻게 구성되어 있을까?
잔디의 HTML <body>에는 script, div, img, span 태그가 있다.
① script: 자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의
외부 스크립트 파일의 URL이 명시됨
type="text/javascript" id>---: 자바스크립트의 미디어 타입은 “text"
② div: Division의 약자로, 레이아웃을 나누는데 주로 쓰임 / 다른 태그와 다르게 특별한 기능을 갖고 있지는 않고, 가상의 레이아웃을 설계하는데 쓰임
③ img: 이미지를 삽입하는 태그
class="ywa-10000" src="https:~~~~" alt="dot image pixel" style="display: none;": src: 속성을 통해 이미지 경로를 지정 / alt: 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시
④ span: <div></div> 태그처럼 특별한 기능을 갖고 있지 않고, CSS와 함께 쓰임 / <div>는 줄 바꿈이 되지만, <span>은 줄 바꿈이 되지 않음
[ 잔디의 CSS ]
CSS는 피부, 외형을 비유로 할 수 있다. 즉, 스타일과 보이는 요소를 개발할 때 사용하는 스택이다. 특히 웹 페이지를 반응형으로 만들기 위해 다양한 화면의 크기를 대상으로 하는데 주로 웹 페이지의 "모양과 느낌"을 처리한다. 실제로 잔디 랜딩페이지 상단에 있는 로고를 보면 너비가 114, 높이가 22인 것을 알 수 있다.
computed를 누르면 적용된 마진까지 볼 수 있다.
또한, <link rel="stylesheet" ~>이라는 CSS를 지우면 위 사진과 같이 모든 디자인 요소가 사라지는 것을 확인할 수 있다. 즉, CSS가 사라지고 원래 데이터와 구조만 보인다는 것이다.
[ 잔디의 JavaScript ]
JavaScript는 근육과 신경계, 즉 혈액순환과 같이 웹 페이지의 상호작용을 담당한다. 특히 복잡한 기능을 처리하는데 기능을 향상하는 프로그래밍 코드를 적용한다.
현재 잔디 랜딩페이지의 footer 부분을 보면 언어를 변경하는 버튼이 보인다. 잔디는 국내 협업 툴이 아닌 글로벌로 이용 가능한 툴이기에 언어 선택 기능이 있다.
언어 선택 기능에는 화살표를 누르면 액션이 수행되는 기능(click)이 있다. 그 기능의 JavaScript를 개발자 도구의 'Event listener'를 통해 알아보았다.
이번 과제는 어떻게 해야 할까 갈피를 못 잡았습니다. 심지어 선택과제를 하고 있었음에도 동기분에게 당당하게 "저 선택 과제 안 할 거예요"라고 말했습니다. 서로 모르는 부분을 얘기하던 도중 제 과제를 보던 동기분이 "지금 선택 과제하고 계신 거 아니에요?"라는 말에 깨달았는데 순간 제 자신이 바보 같았습니다.
그래도 이런저런 태그들을 알아가면서 개발자 분들의 마음을 알게 되었습니다. 특히 왜 개발자분이 "그거 안돼요"라고 말하는지 알게 된 거 같습니다. 앞으로 더 공부해서 원활한 커뮤니케이션을 하는 PM이 되고 싶네요!
출처 및 자료
HTML 기본 틀 작성 및 CSS 연결 (https://ji5485.gitbook.io/web-practice-1/afds/css-c5f0-acb0-bc0f-ae30-bcf8-d2c0-c791-c131)
X-UA-Compatible, IE=edge, 호환성 보기 (https://webdir.tistory.com/38)
viewport 정리 (https://nuli.navercorp.com/community/article/1132729)
meta 태그를 알아보자 (웹표준과 SEO) (https://junhobaik.github.io/meta-tag/)
