You can make anything
by writing

C.S.Lewis

by 앤더슨 Jan 26. 2023

개발자 도구로 살펴본 더블유 토토 숲은?

프론트엔드탐색해 보기 [코드스테이츠 PMB 16기]


PM은 왜 더블유 토토 지식을 알아야 할까?


구성원들과 함께걷기 위해서 더블유 토토 지식은 꼭 필요하다.

우리는 절대 혼자서 일할 수없으며, 다양한 이해 관계자들과 끊임없이 소통을 하며

함께 행동하며 나아가야 한다.


더블유 토토사진 출처 = Unsplash













특히 PM은 모든 이해관계자의 중간 역할로, 빈번하게 혹은 극단적이라면 매번

구성원들은 PM의 적절한 판단과 답변을 기다리고 있을 것이다. (상상만 해도 벌써 너무 부담스럽다.)

그런 상황에서 PM이 프로덕트 개발 상황이나서비스의 전반적인 상황에 대해서 이해를 못 하고

구성원들과 소통에 난항을 겪는다면, 조직 혹은 팀은 길을 잃게 되는 것이다.


더블유 토토동료들의 뜨거운 관심에 비해, 아무것도 모르는 PM



디자인은 어느 정도 실체가 존재하여 눈으로 보며

이야기 가능한 부분이 있기 때문에 소통이 가능한 부분이 충분히 존재하지만,

더블유 토토의 영역은 어느 정도의 지식이 기반하지 않으면 소통 자체가 불가하다.

PM이나 기획자에게 요구되는 것은 커뮤니케이션을 위한 지식 정도이지, 구현을 요구하는 것이 아니다.

실제로 사이드 프로젝트를 진행하면서 민망할 정도로 더블유 토토에 대한 지식이 없어서 어려움이 존재했으나,

친절하고 열정 있는 더블유 토토분들의 설명 덕분에 부족한 부분을 많이 채우고 또 나아갈 수 있었다.


하지만 어떻게 매번 그렇게 일들이 진행될 수 있을까.?

나를 위해서도, 팀원들을 위해서도 결국 커뮤니케이션을 위한 더블유 토토 지식은 무조건적으로 필요하다.

팀원들의 에너지와 시간은 매우 유한하고, 중요한 자원이다.

PM의 미션은 그것들을 잘 지켜면서, 최대로 활용하여 유의미한 서비스를 만들어 내는 것이다.





커뮤니케이션을 위한 나의 더블유 토토 지식 증진 Part 1.

웹 프론트 엔드 / HTML , CSS , Javascript 간단하게 살펴보기



HTML


HTML(Hypertext Markup Language)의 역할은 구조, 뼈대를 만드는 것이다.

콘텐츠들의 레이아웃들을 제어하고, 웹 페이지 디자인을 위한 구조를 제공한다.

모든 웹 페이지의 기둥이자 블록이라고 생각하면 된다.



CSS


CSS (Cascading Style Sheets)의 역할은 위의 구조, 뼈대에 옷을 입혀주는 것이다.

웹 페이지 요소에 스타일을 적용할 수 있고,

웹 페이지를 반응형으로 만들기 위해 다양한 화면 크기를 대상으로 변화를 적용시킬 수도 있다.

쉽게 말하자면, 웹 페이지의 모양과 느낌을 담당하고 있다고 생각하면 된다.



JavaScript


JavaScript의 역할은 상호 작용을 적용, 표현시켜 주는 것이다.

보다 정적인 웹 페이지에서 상호 작용을 통해서 역동적으로 표현할 수 있으며

복잡한 기능과 처리를 할 수 있으며 기능을 향상하는 각종 프로그래밍까지 적용할 수 있다.



더블유 토토이미지로 간단히 표현하는 HTML, CSS, Javascript/ 사진 출처 = Pinterest Vectormine





더블유 토토 숲서비스 웹 메인 페이지, 더블유 토토 도구로 살펴보기


어떤 서비스의 웹 프론트엔드를 분석해 볼까 고민하던 도중에,

평소에 나에게 빛과 소금 같은 존재가 되어주는 서비스, 더블유 토토 숲이 떠올랐고

당장 분석해 보기로 하였다.




스타트업 성장분석 플랫폼

더블유 토토 숲웹 메인(Index) 페이지 구조



웹의 메인페이지(index)의 구조는 크게,

<header,<body, <footer세 분류의 HTML 시멘틱으로 분류할 수 있다.



<header


<header 시멘틱은말 그대로, 웹 페이지의 머리 부분을 담당한다.

주로 로고와 메뉴바, 검색창등이 포함되어 있는 상단의 영역이 <head 시멘틱이라고 생각하면 된다.


실제로 더블유 토토 숲도 로그인, 회원가입, 홈 이동 로고, 검색, 메뉴 바 등이 포함된 영역을

<header 태그를 이용하여 코드를 설계했음을 확인할 수 있었다.


더블유 토토 숲 Index.html , <head 시멘틱의 영역과 코드



<header 시멘틱의 CSS 살펴보기


<header 시멘틱을 감싸고 있는 CSS은 무엇이 있을지 간단히 한 번 살펴보도록 하자.





<header CSS 구조를 살펴보면 반응형으로 구성되어 있다는 것을 알 수 있고, (min-width, max-width)

폰트 종류와 크기, 컬러 등 다양한 디자인 정보들을 확인할 수 있다.




<header 시멘틱의 Javascript 살펴보기


특별한 Javascript 코드는 <body 태그 안에<header 부분에서 보이지 않았다,

아무래도 상단 Html, <head 태그에 각종 Javascript 코드들을 집합해 놓은 것 같다.





<Body


<Body 시멘틱은 말 그대로, 웹 페이지의 몸통 부분을 담당한다.

<header 시멘틱 바로 아래 영역부터, <footer 시멘틱의 위에 영역까지가 모두

<body 더블유 토토의 영역이라고 보면 되는데,

주로 웹 페이지의 메인 배너 페이지 영역 상품 노출 영역 등이 대표적인 <body 더블유 토토의

영역이라고 생각하면 쉽다.


더블유 토토 숲의 <body 영역은 <body 시멘틱 안에 <main이라는 태그 안에 모두 정리되어 있는 것을

확인할 수 있었다.





<body 시멘틱의 CSS 살펴보기


<body 시멘틱을 감싸고 있는 CSS은 무엇이 있을지 간단히 한 번 살펴보도록 하자.



<body 더블유 토토 영역 역시, 다양한 부분에서 반응형 (min-width, max-width)이 적용되고 있었고

각각 다른 크기의 폰트와 아이콘을 사용하면서도, 일관성 있는 디자인을 잘 표현하도록

CSS가 프로그래밍되어있다는 것을 발견했다.




<body 시멘틱의 Javascript 더블유 토토기


<header 시멘틱과 비슷하게, Javascript가 <head 태그에 대부분 담겨있고, 연동되고 있기 때문에

확인하기 어려운 부분이 존재하였으나 메인 배너의 스크린 롤링은 보다 직관적으로 연동되어 있는

코드를 찾을 수 있을 거라 생각했고, 찾아본 결과 연동된 js 코드를 찾을 수 있었다.



보다 복잡한 class의 이름을 가지고 있는 사진 속 코드 부분이,

직접적으로 외부 class와 연결하며 Javascript 코드와 연결시키고 있는 것으로 보인다.

외부 라이브러리 Javascript를 끌어다 쓰거나, 직접 짠 Javascript 코드를 연동시킨 것 같다.





<Footer


<Footer 시멘틱은 말 그대로, 웹 페이지의 발(하단) 부분을 담당한다.

주로 기업 정보, 기업 소개 등과 같은 다양한 정보들을 담고 있는 영역이다.


더블유 토토 숲 역시, <footer 시멘틱 태그 안에 다양한정보들을 담고 있다.





<footer 시멘틱의 CSS 살펴보기


<footer 시멘틱을 감싸고 있는 CSS은 무엇이 있을지 간단히 한 번 살펴보도록 하자.




<footer 더블유 토토 영역도 반응형 제작이 되었지만, 단순한 구조이기 때문에

따로 break point가 설정되어 있지는 않았고(min-width, max-width)이 적용되고 있었고

여전히 일관성 있는 디자인을 잘 표현하도록 CSS가 프로그래밍되어있다는 것을 발견했다.



<footer 시멘틱의 Javascript 더블유 토토기


Footer도 header 더블유 토토과 동일하게 Javascript 코드들을 <head 태그에 연동해 놓은 것 같다.

사실 Footer는 별 다른 상호작용이나 효과가 필요 없기 때문에 특별한 경우가 아닌 이상

Footer 더블유 토토에는 Javascript 코드가 존재하지 않는 경우도 다수 존재한다.







마무리하며


오랜만에, 더블유 토토 도구를 통해서 웹 구조를 통해서 살펴본 것 같다.

물론 이해하지 못하는 구조도 너무나도 많지만,

대부분의 좋은 웹 서비스는 서로 탄탄하고 유기적으로 잘 구조화가 되어있기 때문에

파악하기에 크게 난항을 겪지 않아도 된다.

좋은 더블유 토토는 모든 사람들이 쉽게 알아볼 수 있는 구조와 코드를 짠다는 이야기를 들었다.

이를 PM에 대입해 본다면,

좋은 PM은 모든 사람들과 잘소통할 수 있도록 이해와 설득을 능숙히 해낸다라는

이야기가 되는 것 같다.


이해와 설득, 판단과 답변 등 너무나도 어려운 결정을 PM은 매번 능숙히 해내야 한다.

그 과정들을 잘 해내고 싶은 나의 욕심을 채우기 위해서는 앞으로도 정말 꾸준히 공부해야겠다고 느꼈다.






브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari