<서핏> 홈 피드를 분석해보자

yuuuuuun 2022. 6. 22. 23:29

서핏(Surfit)은 IT 프로덕트 관련 지식 콘텐츠를 큐레이팅하는 웹 서비스 플랫폼이다. 서핏은 IT 업계 트랜드를 따라가고 싶은 사람, 일잘러가 되고 싶은 사람, 취업을 준비하는 사람을 타겟으로 한다. 글쓴이의 경우 크롬 확장프로그램을 쇼핑(?)하다가 눈에 띄어 우연히 사용하게 됐다. 확장프로그램을 이용하면 크롬에서 새로운 탭을 생성했을 때 서핏의 홈 피드를 볼 수 있다. 엄선된 좋은 글들이 많아서 뉴스 기사를 보듯 훑어보는 재미가 쏠쏠하다.

💡이런 순서로 글이 진행될 거예요.
1. 서핏의 HTML 요소를 분석해보자.
2. 서핏의 CSS 요소를 분석해보자.
3. 서핏의 JavaScript 요소를 분석해보자.

1. 서핏의 HTML 요소를 분석해보자.

HTML은 웹(Web)의 구조를 만든다.

HTML은 크게 head와 body 영역으로 나눠 볼 수 있다.

먼저 'head'를 살펴보자. head는 문서의 정보를 나타내는 범위다.

서핏 홈피드의 head에는 다음과 같은 시맨틱 태그가 들어간다.

다음은 서핏의 ‘body’ 영역을 살펴보자. body 영역에 들어간 코드는 사용자가 볼 수 있는 웹 브라우저에 표시된다.

(1) 서핏 홈피드의 body는 크게 header-comp와 content-comp으로로 나뉜다.

(2) content-comp는 다시 nav-area 와 content-area로 나뉜다.

(3) 여기서 content-area 안에는 item-area가 있는데 이 안에 서핏이 제공하는 콘텐츠들이 노출된다.

item은 이런 식으로 구성되어있다.

item 안에서도 header와 footer가 나뉘고, header안에는 image와 desc이 포함된다.

2. 서핏의 CSS 요소를 분석해보자.

크롬의 Web Developer라는 확장 프로그램을 통해 모든 CSS를 비활성화 시키면 오른쪽 사진과 같이 텍스트와 이미지의 디자인이 사라지고 정보가 그저 탑다운 식으로 나열되는 것을 확인할 수 있다.

카테고리 중 한 블럭의 CSS 코드를 불러오면 다음과 같다.

.nav-area .nav-items .cate-level-1>.item:after {
    background: #26272b;
    border-radius: 9px;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: scale3d(.85,1,.5);
    transition: all .15s ease;
    width: 100%;
    z-index: 0;
}

이처럼 배경 색상, 도형의 곡률, 위치, 여백, 크기 그리고 그 안에 글씨의 폰트, 간격, 크기 등

CSS는 웹을 구성하는 각 요소에 스타일을 적용한다고 볼 수 있다.

리스트 형식 vs 갤러리 형식 / 가로로 긴 사각형 vs 세로로 긴 사각형

리스트 형식으로 아티클을 보이는 미디엄이나 브런치, 구글 검색엔진과 달리 서핏은 갤러리 형식을 택했다. 이는 퍼블리나 코드스테이츠의 매거진에서 콘텐츠를 보여주는 모양과 같다. 다만 퍼블리는 가로로 긴 사각형, 코드스테이츠와 서핏은 세로로 긴 사각형의 형태를 띄고 있다. 아마 차이를 보이는 이유는 서핏과 코드스테이츠, 퍼블리가 보여주고 싶은 정보량의 차이가 있기 때문일 것이다. 서핏은 다른 서비스에 비해 아티클이 어떤 내용을 전달하는지 세분화된 카테고리 및 태그를 제공한다. 퍼블리는 깔끔한 정보전달에 '몇 분 분량'을 명시한 것이 눈에 띈다. 코드스테이츠는 몇명이 보았는지 뷰 수를 나타낸 것이 특징이다.

서핏과 코드스테이츠는 한 화면에 6개의 콘텐츠를 보여주지만 퍼블리는 9개의 콘텐츠를 보인다. 이전에 공부했던 UX/UI심리학법칙 '밀리의 법칙'에 따르면 사용자는 7개 전후(오차범위2)로만 기억할 수 있다고 한다. 6개와 9개는 이 법칙에 모두 해당된다. 이중 어떤게 효과적일지는 테스트를 해봐야 알 수 있을 것 같다.

3. 서핏의 JavaScript 요소를 분석해보자.

JavaScript(JS)는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 프로그래밍 언어다.

서핏 홈 피드에서 개발자 도구를 이용해 JavaScript를 비활성화 시키면 이렇게 된다.

JavaScript의 첫번째 흔적, JS가 일을 안하니까 콘텐츠를 불러오지 않는다.

서핏의 contents영역에서 '최근 아티클'이라는 타이틀을 제외하고는 모두 JS를 통해 서버에서 불러오는 데이터라는 것을 확인할 수 있다.

"페이지의 내용이 — 가만히 정적인 정보만 보여주는 것이 아니라 — 주기적으로 갱신되거나, 사용자와 상호작용이 가능하거나, 애니메이션이 적용된 2D/3D 그래픽을 볼 수 있다면 JavaScript가 관여하고 있을 거라고 생각해도 좋습니다." (출처)

JavaScript의 두번째 흔적, 커서를 갖다대면 애니메이션으로 반응한다.

사용자가 메뉴 위로 커서를 올리면 이를 물리적으로 만진 것 처럼 반응한다. 가장 오른쪽에 있는 광고의 경우, 눈에 띄도록 이미지 공간을 충분히 확보하고 관심있는 사용자가 그 위로 커서를 올렸을 때 상세 정보를 확인할 수 있도록 기능한다.

JavaScript의 세번째 흔적, 클릭(Click)하면 기능한다. (=요청하면 응답한다)

클릭하면 기능한다. 서핏에서 카테고리를 편집하고 북마크를 설정할 수 있다. 또한 입력된 링크를 타고 다른 페이지로 이동할 수 있다. 이러한 기능들도 자바 스크립트로 구현된 것으로 보인다.

이 외에도 관심없는 글을 가리고, 아래로 스크롤시 새로운 콘텐츠를 불러오는 등 다양한 기능을 JavaScript를 통해 구현한다.

나?? 서핏(Surfit)에 이미 스며듦

코드스테이츠를 수강하고 매일매일 다른 공부를 하게되면서 서핏에서 만나는 관련 용어들이 굉장히 반가웠다. "아 이거 오늘 분석한 프로덕트인데?", "이거 오늘 배운 개념인데?"라는 생각 다음에 따라오는 강력한 호기심으로 글을 눌러 확인한다. 때로 동기분의 글을 발견하면 나도 잘 써봐야겠다는 의지를 불태운다. 컴퓨터로 크롬을 실행하면 확장프로그램으로 깔린 서핏을 보게되는데, 유튜브에서 끌리는 영상을 '나중에 볼 영상'에 저장하듯이 서핏의 피드를 스르륵 내리다 북마크를 몇 개 걸어논다.

서핏은 지식 콘텐츠 큐레이팅 서비스를 넘어 성공적인 '커리어 관리'를 위한 기능을 개발중이다. 2019년 6월에 디자이너를 위한 서비스로 시작한 서핏은 이후 IT업계의 더 많은 직군을 타겟으로 확장해갔다. 서핏의 채용 페이지로 들어가면 디자이너를 위한 채용공고만 나올 뿐 아직 다른 직군은 준비중이라는 문구가 떠있다. 나는 서핏이 'IT 프로덕트 관련 콘텐츠'을 제공한다는 점과 특정 플랫폼 내에서 한정적인 아티클만 보지 않아도 된다는 점, 그리고 인터넷 브라우저를 실행하자마자 볼 수 있다는 편리함이 서핏을 계속해서 사용하게 만든다. '앞으로 서핏은 유저들이 유튜브나 뉴스를 보는 시간을 뺏어올 수 있을까?' '다른 플랫폼 대신 서핏에서 서핑 할 수 있을까?' '앞으로의 커리어를 서핏에서 관리할 수 있을까?' '계속해서 양질의 콘텐츠를 제공할 수 있을까?' 이런 문제를 해결한다면, 따라서 서핏 사용자가 더 많아진다면 서핏은 앞으로 더 큰 서비스로 성장할 거라고 생각한다.