트레바리 온라인 커뮤니티 활성화를 위한 프로필 페이지 및 아키텍처 구현 과정

안녕하세요. 트레바리 테크 셀 크루 이뇽입니다.

이번에 트레바리 서비스에서, 각 멤버(유저)들이 자신을 소개할 수 있도록 '프로필 페이지' 기능을 구현하였습니다.

트레바리는 현재 독서모임 기반으로 엄청나게 활발한 커뮤니티 활동이 열리고 있습니다.
한 달에 한 번 정규 독서모임과 제한 없는 번개모임, 그리고 엄청나게 다양한 이벤트도 참여할 수 있는데요.

저희 트레바리에서는 이러한 오프라인 커뮤니티 활동에 그치지 않고, '세상을 더 지적으로, 사람들을 더 친하게' 만들기 위해서 온라인 커뮤니티까지 더 활성화하고자 하는 방안을 모색하였습니다.  

 

트레바리 모임 독후감 페이지 중

 

독후감 상세 페이지 중 댓글 및 좋아요 기능

 

현재 트레바리 서비스에서 할 수 있는 커뮤니티 활동은 독서모임 서비스에 알맞게, 독후감 제출과 해당 독후감 '댓글', '좋아요' 기능으로 구성되어 있고, 앞으로 더욱 온라인 커뮤니티를 활성화시킬 수 있도록 계속 고민해보고 시도하는 중입니다.

저희 트레바리에서는, 400자 이상의 독후감을 제출하고 모임에 참석을 하기 때문에 독후감 제출률은 엄청나게 높은 편입니다. 
그러나 아직까지도 독후감 '댓글' 기능과, '좋아요' 기능을 비교적 활발하게 이용을 하지 않는 멤버들이 꽤 있었습니다.

 

그래서 이번에 이러한 온라인 커뮤니티 요소를 높이기 위한 방법으로, 각 멤버들의 프로필 정보를 활성화시켜 온라인 활동을 UpUp하게 해 줄 프로필 페이지를 제작하기로 했습니다.

구현 내용 소개

우선 유저의 프로필 정보로 사용할 데이터가 추가되었습니다.

• 프로필 이미지
• 자기소개
• 인스타 계정
• 페이스북 계정

# 기존의 계정 정보 수정 화면

기존 '내 정보 수정' 페이지

 

# 변경된 프로필 정보 수정 화면

추가된 '프로필 정보 수정' 페이지

기존의 '내 계정 정보 수정' 페이지에, 탭 형식으로 '내 프로필'을 수정할 수 있는 페이지가 추가되었습니다.
해당 페이지에서, 유저들이 자신을 드러낼 수 있는 프로필 이미지와, 자기소개, SNS를 등록할 수 있도록 구현하였습니다.

 

# 프로필 공개 화면과 비공개 화면

프로필 정보를 등록하면, 프로필 페이지가 위 사진처럼 나타나게 됩니다. 
'멤버 소개' 탭에는 유저가 등록한 자기소개 내용과 SNS 계정으로 넘어갈 수 있는 링크가 나타나게 됩니다.

 

프로필 페이지의 독후감 탭

독후감 탭과 클럽 탭은 유저가 작성한 독후감과 활동한 클럽을 열람할 수 있음으로써, 해당 유저가 활동한 내역을 확인해 볼 수 있습니다. 
그러나 이러한 정보를 공개하지 않기를 원하는 유저도 있을 수도 있겠죠?

 

열람 비공개로 설정한 프로필 페이지 화면

자신의 프로필 정보를 공개하길 원치 않는 유저를 위해서 공개 여부 확인 기능을 함께 만들었습니다.
그러나 여기서 예외처리로, 만약 해당 유저의 프로필을 열람하는 사람이 자기 자신이라면, 비공개 프로필이라며 보여주지 않으면 안 되겠지요.

 

# 프로필 페이지 열람은 어떻게?

독후감 상세페이지

독후감 상세 페이지의 댓글화면

온라인 커뮤니티로 활동되는 페이지(클럽 상세 모임 페이지, 독후감 페이지 등) 내에서 해당 유저의 이름 클릭으로 유저의 프로필을 열람할 수 있습니다. 

클럽 정보 페이지

또한 클럽 모임의 중요한 역할을 해주시는 파트너님에 대한 정보를, 프로필 페이지를 통해 더 자세히 확인해 볼 수 있게 되었습니다.

 

프로필 페이지 기능 구현의 몇 가지 핵심 내용

사실 프로필 페이지를 구현하는데 전제적으로는 웹 페이지를 만드는 일이여서 기술적인 큰 내용은 없었으나, 그나마 소개를 해도 괜찮겠다고 생각되는 기술 내용 몇 개를 가지고 한번 다뤄보도록 하겠습니다.

# 프로필 이미지 업로드 방식

프로필로 사용될 이미지들은 각각 가로, 세로 크기가 다를 것입니다.
그래서 유저가 원하는 요소만 적용할 수 있도록, 직접 이미지를 조정하여 등록을 할 수 있는 기능을 구현해야 했습니다.

그렇게 라이브러리를 검색해 본 결과, 아래의 좋은 라이브러리를 찾을 수 있었습니다.

react-avatar-editor

원본 이미지에서 사용자가 선택한 부분만 이미지 객체로 가져오는 기능을 할 수 있는, 딱 저희가 필요로 한 기능이었습니다. 

 

react-avatar 라이브러리를 트레바리 프로필 업로드 기능에 적용시킨 모습

또한, 기존의 트레바리 서비스에는 이미지를 업로드 시, 300KB의 용량을 제한하고 있었습니다.
고화질의 이미지를 그대로 사용하면, 서비스 내에 불필요한 만큼의 용량으로 인해 이미지 로딩과 서버의 리소스가 들어가는 성능 감소의 요소가 있었기 때문입니다.

그러나 React-avatar는 유저가 이미지 부분 선택을 하면, 알아서 이미지 리사이징까지 해줌으로써, 고화질의 이미지 용량을 그대로 사용하지 않고 적절하게 용량을 줄여주기도 했습니다.

# 이미지 용량 측정 결과

이미지 객체를 console.log로 뽑은 내용

이미지 객체의 용량을 Before, After로 정리한 내용

 

적용해본 결과, 2MB 정도인 고화질의 이미지를, 무려 약 300KB 이하까지 줄여주었습니다.
엄청난 성능입니다.
덕분에 적절한 이미지 용량 사용으로 성능을 최적화시킬 수 있게 되었습니다.

 

# 해당 유저의 프로필을 열람하기 위한 쿼리스트링 처리

유저 이름 클릭으로 인해 프로필 페이지로 넘어갈 때, 해당 페이지에서 보여줄 유저의 정보를 데이터베이스에서 가져오기 위해서는, 클릭된 유저 객체 중에서 고유의 값인 데이터를 쿼리스트링으로 넘겨주어야 했습니다.

유저의 정보 중 고유의 값을 쿼리스트링으로 전달받은 프로필 페이지에서는, 전달받은 데이터를 조건으로 해당 유저의 프로필 정보를 가져옵니다.
처음에는 당연히 유저 이름을 클릭하면, 유저의 primary key 값을 전달하려 했습니다.

그러나 쿼리스트링으로 데이터를 전달하면, 위 사진과 같이 주소 창에 노출이 되므로, 개인정보 보호와 서비스 보안에 영향을 끼치지 않도록 해야 했습니다.

이 부분에서 테크 셀끼리 많은 얘기를 나눈 결과, 유저 정보의 일부분들을 조합하고 특정 알고리즘을 이용해 인코딩, 디코딩을 이용하는 방식으로 구현하도록 했습니다.

유저 이름을 클릭하면, 해당 유저의 고유 정보와 여러 데이터들을 무작위로 조합한 후, 특정 알고리즘 방식으로 인코딩을 하여 key를 uid, value를 해당 인코딩 값으로 프로필 페이지에게 넘겨줍니다.

 

프로필 페이지로 넘긴 쿼리스트링 값

그러면 값을 넘겨받은 프로필 페이지는 해당 값을 다시 디코딩시켜 정상적인 문자열로 복원 후, 무작위로 조합된 문자열에서 고유의 문자열만 떼어내고, 해당 고유의 값을 이용하여 유저의 정보를 DB에서 가져오게 했습니다.
(더 상세한 내용은 트레바리 보안 상 알려드리기 어려운 점을 이해해 주시기 바랍니다.)

추가) 구현 중 있었던 이슈사항

# 이미지 리사이징을 위한 sharp 라이브러리

처음에 이미지 처리 기능을 위해서 리사이징 기능을 넣으려고, sharp라는 라이브러리를 이용해 보려고 했습니다.

해당 라이브러리를 이용하면 두 가지 방법이 있었습니다.

• 클라이언트 단에서 이미지 처리 후 객체를 백엔드로 전달
• 이미지 객체를 그대로 서버로 전달 후 백엔드에서 이미지 처리

클라이언트 단에서 처리하게 되면 유저의 리소스를, 백엔드에서 처리하면 서버의 리소스를 사용하는 정도의 차이가 있습니다.
둘 다 시도를 해보려고, 우선 클라이언트에 sharp 라이브러리를 설치했습니다.

sharp 라이브러리를 사용하니, 아래와 같은 에러 메시지가 나타납니다.

ERROR in ./node_modules/detect-libc/lib/detect-libc.js
Module not found: Error: Can't resolve 'child_process' in '...\node_modules\detect-libc\lib'

 

이 에러 메시지의 원인을 파악하기 위해 구글링을 1시간 동안 했고... 도저히 원인을 찾지 못하다가, 'sharp child_process'로 키워드를 같이 검색을 한 결과, 해당 내용을 찾을 수 있었습니다.

can't run sharp with angular 7 · Issue #1605 · lovell/sharp

네... 클라이언트에서는 sharp 라이브러리를 쓸 수 없다고 합니다. 

그래서 백엔드에서 처리해야지 했다가 위에 소개한 react-avatar라이브러리를 발견하게 되었고, 성능은 좋지만 꽤 무거운 sharp는 쓰지 않게 되었습니다.

프로필 페이지 기능 구현으로 인한 기대 효과

아직은 프로필 페이지에 대한 기능을 모르시는 멤버들이 많아, 현재 이 기능으로 인해 얼마나 온라인 커뮤니티가 활성화되었는지는 지표로 확인하기는 어렵습니다. (아마... 4~5개월 정도 지켜본 후에 데이터 수치를 조금 뽑아볼 수 있지 않을까요?)

그러나 이 기능으로 인해, 같이 활동하는 멤버들에 대해 조금 더 파악할 수 있게 됨으로써, 독후감 댓글과 좋아요 기능의 사용률 상승,  그리고 다른 멤버 프로필 열람 수가 활발해지는 기대를 가지고 있습니다.

향후 몇 개월 뒤에 정확한 측정을 해볼 수 있는 시기가 오면 다시 업로드하도록 하겠습니다.

이상 프로필 페이지 기능 구현 내용이었습니다. 감사합니다.