seol12/SeolCat

우리들의 커뮤니티 SEOLCAT

프로젝트 소개

지금 무슨 생각을 하고 계신가요?

오늘 하루는 당신에게 어땠나요?

지금 느끼는 감정을 공유해요!

아무 눈치 볼 필요 없는 우리들의 자유로운 소통의 공간 설캣입니다.

기술 스택

• FRONT

  

• BACK

  

• DESIGN

  

버전 변경사항

자세히

개요

친구가 서비스하는 봇은 이용률이 높고 왜 내 서비스는 이용률이 낮은 걸까,
친구의 서비스처럼 이용률이 높으려면 어떻게 해야 될까 하고 문득 생각이 들었습니다.

생각에 그치지 않고 실행에 옮기기 위해 먼저 서비스를 이용 중인 유저들과,
이용하다가 이탈한 유저들에게 의견을 들었습니다.
유저들의 의견을 종합해 보니 크게 디자인, 기능 부재, 서비스 속도를 지적했습니다.

의견들을 참고하여 계획을 세우고, 버전 업데이트를 진행했습니다.

1️. 직관적인 인터페이스와 친숙함이 느껴지게 디자인을 적용할 것.   

2. 서비스 이용 시 불편함을 유발했던 부분들을 보완하고 부족했던 기능들을 추가할 것.   

3. 초기 로딩을 개선하여 서비스 이탈률을 감소시킬 것.   

문제점

• 디자인, 기능

  

  인터페이스가 직관적이지 않아 유저들에게 좋은 인상을 주지 못했습니다.

  특정 기기에서 컨텐츠가 올바르게 제공되지 못하여
  해당 기기를 사용하는 유저들에게 불편함을 주었습니다.

  

  사이트의 컨셉은 플레이를 자랑하거나, 플레이를 박제해서 공유하는 것에
  초점이 맞춰져있어 유저들이 자신을 표현할 수 있는 공간이 없었습니다.

  주된 기능인 게시글, 댓글은 작성, 삭제만 지원하여 게시글 또는 댓글을 수정하려면
  삭제 후 다시 작성을 해야 하는 불편함이 있었습니다.

• 성능

  

  패키지의 도움을 받아 디자인과 기능을 구현하여
  프로젝트가 의존하는 패키지 개수가 많았습니다.

  

  빌드 시 모듈의 크기가 클라이언트는 16.04MB, 서버는 1.95MB로 측정되었습니다.

  Gzip으로 압축해서 빌드가 되어도 클라이언트는 3.76MB, 서버는 403.59KB으로 모듈의 크기가 컸습니다.

• 사이트 품질, 초기로딩

  

  다양한 유저들을 위한 웹 접근성을 고려하지 못했습니다.

  페이지별 SEO 최적화를 적용하지 못했습니다.

  모듈의 크기가 커서 퍼포먼스가 좋지 못했습니다.

  초기 로딩 속도는 인터넷 환경에 따라
  DOM 트리가 완성되는 시간은
  최고의 조건에서 2.32s 최악의 조건에서는 4.23s,
  컨텐츠가 모두 불러와지는 시간은
  최고의 조건에서 3.21s 최악의 조건에서는 5.56s로 측정되었습니다.

  평균적으로 2.61s, 3.74s로 초기 로딩 속도가 매우 느렸습니다.

개선

• 디자인, 기능

  

  유저들에게 친숙하게 다가가기 위해 직관적인 인터페이스를 적용했습니다.

  이용에 불편함이 없게 다양한 디바이스 환경에 대응 했습니다.

  

  사이트 컨셉을 모두의 자유로운 공간으로 변경하여
  자유로운 공간이라는 컨셉에 맞게 자신을 표현하고 꾸밀 수 있는
  기능들과 공간을 추가했습니다.

  유저들의 불편함을 유발했던 부분들을 보완하고 부족했던 기능들을 추가하여
  사용자 경험을 개선했습니다.

• 성능

  

  프론트엔드라면 패키지의 도움 없이 화면을 그릴 줄 알아야 하고,
  구현할 수 있는 부분은 직접 구현 하는 게 옳다 생각되어
  UI 프레임워크와 기능 관련 패키지들을 전부 제거했습니다.

  패키지를 사용해야 한다면 패키지의 크기가 작은 것을 택해 사용했습니다.

  

  클라이언트 모듈은 16.04MB에서 556.57KB로 모듈의 크기가 96.6% 감소했습니다.

  

  서버 모듈은 1.95MB에서 478.67KB로 모듈의 크기가 76% 감소했습니다.

• 사이트 품질, 초기로딩

  

  모듈 경량화 작업을 통해 모듈의 크기를 줄였습니다.

  다양한 유저들을 위해 웹 접근성을 고려하여 마크업을 작성했습니다.

  페이지별 SEO 최적화를 적용했습니다.

  페이지별 평균 점수가
  Performance: 65점, Accessibility: 64점,
  BestPractices: 68점, SEO: 70점에서

  Performance: 99점, Accessibility: 99점,
  BestPractices: 90점, SEO: 100점으로
  전반적으로 사이트 품질이 크게 향상되었습니다.

  

  DOM 트리가 완성되는 시간은 2.61s에서 283ms로
  컨텐츠가 모두 불러와지는 시간은 3.74s에서 414ms로
  초기 로딩 속도가 크게 개선되었습니다.

기능

페이지별 기능

• 메인 페이지

  
  

  • 유저들이 작성한 게시글들을 조회할 수 있습니다.

  • 게시글을 작성할 수 있습니다.

• 프로필 페이지

  

  • 유저의 프로필을 확인할 수 있습니다.

  • 유저가 작성한 게시글들을 조회할 수 있습니다.

  • 유저가 좋아하는 게시글들을 조회할 수 있습니다.
    

  
  • 프로필을 업데이트할 수 있습니다.

• 검색 페이지

  
  • 검색어를 입력하여 해당 검색어가 포함된 게시글들을 조회할 수 있습니다.

• 로그인, 회원가입 페이지

  
  • 로그인, 회원가입을 할 수 있습니다.

• 게시글 페이지

  
  • 공유 받은 링크로 이동하여 해당 게시글을 확인할 수 있습니다.

공통 기능

• 게시글 관련

  
  
  • 게시글을 수정, 삭제, 공유할 수 있습니다.

• 댓글 관련

  
  • 댓글을 작성할 수 있습니다.
    
  
  • 댓글을 수정, 삭제할 수 있습니다.

• 메뉴

  

  • 메인으로 이동할 수 있습니다.

  • 프로필로 이동할 수 있습니다.

  • 좋아하는 게시글 목록(프로필)으로 이동할 수 있습니다.

배포사이트

www.seolecat.com