무기는 끈기

[코드스테이츠 PMB 15기] 핀트(Fint) 웹사이트 프론트엔드를 탐색해보자 본문

Product Management (PM)

[코드스테이츠 PMB 15기] 핀트(Fint) 웹사이트 프론트엔드를 탐색해보자

김유비야 2022. 11. 29. 00:34

(W7D1)

 

 

 

오늘은 PM, PO, 기획자가 갖추어야 할 개발 관련 기초 지식을 공부하였다. 

 

수업을 들으며 왠지 익숙한 예시들이 나와 어라 이 책에서 차용한 예시인가? 하고 궁금했는데 역시나 수업 뒤에서 이 책에서 예시를 빌려왔다고 하였다. 내가 책을 제대로 읽긴 했군! 하며 반가웠다. 익숙한 내용 덕에 복습 차원으로 더 재밌게 들을 수 있었다.

 

정말! 아주! 재밌고 쉽게 꼭 필요한 IT 지식을 풀어낸 책이라 밑줄 쳐가면서 읽었다. 주변에 IT 관련해서 궁금증을 가지는 사람들이 있다면 주저없이 이 책을 추천하게 될 것 같다. 

 

 

 

 

 

프론트엔드는 HTML, JS, CSS 이 3가지로 이루어진다.

 

HTML은 아래 그림에서도 볼 수 있듯이 '뼈대'를 구성한다.

JS는 자바 스크립트의 약자로 '근육, 신경망'을 구성한다.

CSS는 '피부'를 구성한다. 색깔, 보여지는 이미지 등을 말한다.

 

 

이 세가지가 멋지게 조합되어 우리가 보는 웹페이지를 구현해낸다.

 

 

 

 

 그간 기획, IT 업계 취업을 준비하며 다양한 직무 관련 서적, 유튜브를 접하고 독학으로 공부하며 얻은 자잘한 지식 덕에 편하고 더 쉽게 수업을 이해할 수 있었다.

 동시에 궁금증은 더 커져서 Q&A 세션에 평소보다 더 열심히 질문하게 되었다. 한시간이 후딱 지나간 것 같다.

 

프론트엔드보단 백엔드에 관심이 많아서 오늘도 재밌었는데 내일은 얼마나 더 재밌을지 기대가 됐다.

그 중에 리액트 라이브러리 관련하여 일상에서 발견한 질문을 하였고 답변도 재미있었다.

 

 

 비주얼 스튜디오 등 라이브러리 차이를 더 알아보고, 직접 경험해보고 싶어졌다. 평소라면 엄두도 내지 않았을 프로그래밍 분야를 기획을 공부하며 조금씩 찍어먹어 보고 있다.

 

이런 날이 올 줄 알았을까? 배움은 정말 설레고 무궁무진 한 것 같다.

 

 

 

 

 

 

그럼 이제 본론으로 돌아가 

오늘 글의 주제인 핀트(Fint) 랜딩페이지의 개발자 도구를 열어 하나하나 뜯어보자.

 

원래는 레고 홈페이지로 하려고 했으나 미숙한 나에겐 랜딩페이지에 너무 많은 기능이 담겨져 있어서 늘 관심을 갖고 있는 로보어드바이저 AI 자산투자 어플인 핀트의 웹페이지로 선정했다.

 

 

 

 

 

먼저 개발자도구(F12)를 열어보았다.

맥OS에선 'command + option + i키' 를 눌러야 나온다. (애증의 맥북.. )

 

 

 

 

이렇게 봐선 뭐가 뭔지 모르겠으니 영역 단위로 잘라서 살펴보기로 한다.

 

 

 

[HTML 요소]
1. 화면의 구성 요소들이 어떻게 배치되어 있는지 구조를 정리해 분석해보자.

 

핀트의 HTML은 <head>, <body> 로 이루어져있다.

<html lang="ko"> 는 홈페이지에서 사용하는 언어를 한국어로 지정해준 것이다.

 

 

 

 

*

 

 

 

<script type="text/javascript"> 이렇게 반복되는 구간이 있어 이건 무슨 뜻인지 찾아보았다.

 

예전에는 자바스크립트 외의 스크립트 언어들이 자주 사용되어 자바스크립트를 특별히 인식하게 하기 위해 적어주었다고 한다. 현재 HMTL5에서는 디폴트 스크립트 언어가 자바스크립트로 지정이 되기 때문에 따로 선언을 해줄 필요가 없이 

<script> </script> 와 동일한 문장으로 사용된다고 한다.

 

그렇지만 하위 호환성을 위해서 적어주는 것이 좋다고 한다.

 

 

 

 

*

 

 

 

핀트 프로덕트는 모바일 프로덕트이기 때문에 홈페이지에선 할 수 있는 기능이 거의 없다.

그래서 랜딩페이지에서 클릭할 수 있는 버튼은 '앱 다운로드' 뿐이다.

 

앱 다운로드의 HTML 코드는 아래와 같다.

 

<a href="https://fint.onelink.me/acbn/38d4d9f4" target="_blank" class="css-1upci5t"><span class="css-dhuliy">앱 다운로드</span></a>

 

 

 

 

 

 

 

[CSS 요소]
2. 각 구성요소들이 어떠한 모양을 하고 있는지 스타일을 정리해 분석해 봅니다. 

 

 

CSS를 펼친 모습은 이렇다.

 

 

 

 

 

div는 Division의 약자로 div 태그 안에 넣어서 레이아웃을 지정하여 CSS를 구현할 수 있다.

 

 

 

 

head 부분을 완전히 삭제해본 모습이다. 각종 로고가 뒤섞인 모습을 볼 수 있다.

 

 

 

 

CSS는 HTML에 비해 직관적으로 와닿지 않아 혼자서 분석하기엔 어려움이 있다. 조금 더 공부해보고 싶다는 생각이 들었다.

 

 

 

 

 

 

 

[JavaScript 요소]

3. 각 구성요소들이 가지고 있는 특정한 동작이 무엇인지를 정리해 분석해 봅니다.

(단, 기능 중 '다른 페이지로 연결'은 제외합니다.)

 

 

 

 

우측 상단에 드롭 다운 버튼이 궁금해서 코드를 살펴보았다.

 

<span></span>

<span></span>

<span></span>

 

으로 ' span 20 x 2 ' 이 세줄 늘어져 있는 모습을 코드로 그대로 구현해놓은 모습이 귀여웠다.

 

 

<span></span> 코드를 2줄 지웠더니 1줄만 직관적으로 남는 모습이 보인다.

 

 

 

*

 

 

 

 

앞서 말했다시피 핀트는 웹서비스가 아닌 모바일 앱서비스 이기 때문에 홈페이지에 많은 기능이 없다.

 

그래서인지 자바스크립트 요소를 확인할 수 있는 'id', 'class', 'tag' 태그는 많지 않았다.

 

 

 

 

 

 

지레 겁먹고 단순한 웹사이트를 선정했지만, 다음엔 더 기능이 많은 웹사이트의 개발자 도구를 살펴보고 싶다.

또 콘솔 섹션으로 보고 오류를 살펴보고 알아들을 수 있는 폭이 넓어지도록 공부하려고 한다.

 

비전공자 IT 책을 재독할 생각이다. 전에 읽었을 때보다 더 이해할 수 있는 부분이 많아지겠지 싶어 기대되는 마음이다.

 

 

 

 

 

 

 

동기분께서 올려주신 'HTML 기본구조 - 시멘틱 태그' 글을 참고하였다.

https://itstudyblog.tistory.com/368

 

 

 

 

 

'Product Management (PM)' 카테고리의 다른 글

[코드스테이츠 PMB 15기] 네이버를 분석해보자 + 네이버에서 경매를?  (0) 2022.11.29
[코드스테이츠 PMB 15기] 피그마로 만들어본 핀트(Fint) 플로우차트 + 짧은 회고  (0) 2022.11.29
[코드스테이츠 PMB 15기] 태블로를 이용하여 뇌졸중 예측 데이터를 시각화해보자  (0) 2022.11.25
[코드스테이츠 PMB 15기] 11가지 임상 특징으로 겨울악마 '뇌졸중'의 발병 확률을 예측해보자  (1) 2022.11.24
[코드스테이츠 PMB 15기] DotHabit 일반인의 1일1커밋? 습관 기르기 어플  (0) 2022.11.22
'Product Management (PM)' Related Articles more