- 프로젝트 개요
- 아이디어 소개
- 기능 소개
- 기술 스택
- 주요 기능 시연
1). 회원가입 및 로그인
2). 포스트 업로드
3). 메인 페이지 및 개인 페이지
4). 드래그 방식 좋아요 기능
5). 스크랩 기능
Scrapper는 텍스트 기반 SNS 서비스입니다.
사용자는 Scrapper를 통해 가볍게 자신의 생각을 표현할 수 있고,
다른 사용자의 글의 원하는 구간을 선택하여 좋아요를 남길 수 있습니다.
메인 아이디어는 '인스타그램 스토리의 텍스트 버전'이었습니다.
인스타를 하다 보면 게시물을 전혀 올리지 않는 사람들도 스토리는 자주 올리는 것을 종종 보게 됩니다.
왜 사람들은 게시물보다 스토리를 더 활발하게 이용할까요?
인스타 스토리의 특징은 업로드의 부담감을 최대한 낮추었다는 데에 있습니다. 게시물은 업로드를 위해 원하는 순서대로 크기에 맞추어 여러 장의 사진을 업로드하고 보정도 해야 하지만, 스토리는 한 장의 사진만을 원하는 구성으로 자유롭게 업로드하면 됩니다. 그마저도 24시간이 지나면 사라지기 때문에 전혀 부담이 없게 되죠.
이러한 스토리의 '가벼움'은 사용자들이 스토리를 활발하게 이용하도록 만드는 이유일 것 입니다.
이러한 아이디어를 바탕으로, 본 프로젝트는 가볍게 글을 쓸 수 있고, 이를 다른 사람과 공유하고, 글에 대한 상호작용을 이루고자 구상되었습니다.
이를 위해 Scrapper를 다음과 같은 기능으로 구성하였습니다.
- 텍스트 기반 포스트 업로드
- 텍스트 드래그 방식 좋아요 표시
- 색으로 좋아요 양 표현
- 포스트 스크랩
이번 프로젝트는 개인 프로젝트로, 프론트엔드 / DB구축 / 배포까지 진행하였습니다.
Scrapper는 ID와 PW를 통해 회원가입할 수 있습니다. 회원가입을 마치면 해당 계정으로 로그인되며, 안내 게시물이 보이게 됩니다. (안내 게시물은 개인에게만 보입니다)
나의 개인 페이지에서 텍스트를 입력한 뒤, 로고를 클릭하여 업로드할 수 있습니다.
텍스트 입력필드는 원래 contentEditable로 구현하려 했으나, 한글 입력 시 중복 입력되는 문제가 발생했습니다. 이에 필드 내에서 줄바꿈이 가능하고 비교적 자유롭게 조절이 가능한 textarea를 사용하여 구현하였습니다.
이렇게 업로드 된 포스트는, 포스트에 마우스오버 시 나타나는 우측 옵션을 통해 삭제할 수 있습니다.
우측 상단에 있는 메뉴바를 통해서 페이지 간 이동을 할 수 있습니다.
posts 페이지로 이동하면 전체 사용자들이 업로드한 포스트를 확인할 수 있으며, 바로 좋아요 표시를 할 수 있습니다.
포스트를 클릭하면 해당 사용자의 개인 페이지로 이동할 수 있습니다
개인 페이지에서는 해당 사용자가 업로드한 포스트들을 확인할 수 있습니다.
또, 로고 대신 해당 사용자의 ID를 띄워 어떤 사용자의 개인 페이지인지 확인할 수 있도록 하였습니다.
원하는 텍스트를 드래그하여 좋아요를 표시할 수 있고, 좋아요 정보는 각 글자별 배경 색상의 차등을 통해 표시하도록 하였습니다.
텍스트 드래그 정보를 얻기 위하여 selection Web API를 사용하였습니다. 또 글자별 배경 색상 적용을 위해 좋아요 정보를 각 문자 인덱스 별로 좋아요 개수의 배열로 만들었고, 이에 따라 각기 다른 배경 색상을 적용하여 구현하였습니다.
원하는 포스트는, 포스트에 마우스오버 시에 나타나는 옵션을 통하여 스크랩할 수 있습니다.
스크랩을 완료하면 알림이 뜨며, 이후 스크랩 페이지에 추가되어 있는 것을 확인할 수 있습니다.