본문 바로가기

프로젝트/뉴스 매니저 - 직관적인 뉴스 관리 앱

[App] 뉴스 매니저 출시

구글 Keep이라는 앱에서 영감을 받아서 리액트 네이티브를 사용하여 뉴스 매니저 앱을 만들어 봤습니다.

 

뉴스 스크랩 기능에 특화된 Keep이라고 생각하면 되겠습니다.

이를 위하여 내부 브라우저와 네이버 뉴스나 다음 뉴스 같은 뉴스 중개 기능도 제공합니다.

 

다운로드

https://뉴스매니저.kr

주요 기능

  • 즐겨찾기
  • 스크랩
  • 공유
  • 암호화 백업/복원
  • 하단 지향 사용자 인터페이스
  • 데이터 공유 및 공유 수신 기능

힘들었던 점

  • 인증/데이터 보호 방법
    구현 자체가 아니라 정답이라는게 없이 앱의 기능이나 환경마다 다르게 적용될 수 있는 부분이다 보니 다양한 상황을 가정해서 그려보거나 만들어보는 것을 반복하는 것이 힘들었습니다.
  • 사용자 인터페이스
    구글 Keep처럼 스크랩한 기사들을 벽돌 형식으로 쌓아서 보여주는 것이 힘들었습니다.
    제가 직접 만든것은 아니고 Feng-Bu-Jue님이 공유한 react-native-waterfall 라이브러리를 사용했지만, 기능이 적었고, ScrollView에 특정 영역만 랜더링하는 가상화를 적용했지만, 어쨌든 ScrollView이기에 저사양폰(Nexus 5X)에서는 끊김이 너무 심했습니다.
    지금은 코드를 수정하여 방향을 반전시키고 성능도 만족할 만한 수준까지 올렸습니다.
  • 캐시 제어
    일반적인 사용자는 거의 느끼지 못하겠지만 나중에 다른앱을 만들더라도 도움이 될 것 같아 GraphQL 캐시 제어에 많은 노력을 들였습니다.
    예를 들어, 내가 '좋아요' 표시한 다른 사용자의 공유 스크랩을 로드했을 때, '좋아요'를 해제하면 캐시에서도 삭제합니다.
    이것도 그냥 삭제하지 않습니다. 서버에 쿼리(좋아요 표시한 스크랩)를 요청할 때는 한 번에 모두 요청하는 것일 아니라, 제한된 개수로 나눠서 요청을하게 되는데, 캐시는 요청 단위로 저장됩니다. 이런것 까지 모두 고려해서 좋아요가 해제된 스크랩을 캐시에서 삭제해 주는 로직이 구현되어 있습니다.
    뉴스 매니저에서 서버와 통신하는 로직에는 대부분 캐시 제어 로직도 포함되어 있습니다.
    만약 캐시를 사용하는데 위와 같은 추가적인 로직이 없다면, 다음에 다시 동일한 요청을 했을 때, 캐시에 남아 있는 데이터 때문에, 어떤 데이터를 삭제했음에도 그대로 보이는 결과가 나타납니다.

얻은 것들

  • GraphQL 캐시 직접 제어
  • 데이터 암호화 및 동기화
  • 다양한 인증 방식
  • 리액트 훅에 더 익숙해짐
  • DB 처리 단순화 (Prisma 이용)
  • 디자인 감성?
  • 비규칙적인 애드몹 사용 방법 및 주의사항

계획

메모를 벽돌 형식으로 한 눈에 보여주는 기능이 유용하긴 하지만 구글 Keep의 다운로드 횟수가 1억건 이상 될 수 있었던 것은 다양한 플랫폼에서 동기화되는 기능 덕분이었을 것입니다.

 

처음에는 뉴스 매니저도 그렇게 만들었습니다. 그런데 만들고 보니 뉴스 스크랩이라도 누군가에게는 일기가 될 수 있다는 생각을 했습니다. 아마도 구글 Keep은 서버에 저장된 데이터에 암호화 기술이 적용되어 있을 것입니다. 그래서 일단은 즐겨찾기와 사용자가 공유하지 않은 스크랩이 서버로 올라가는 코드를 모두 삭제했습니다.

 

너무 아까웠습니다. 아래 동영상에 중반부에 나와있지만 오프라인 상태에서도 수정된 상태를 기억해 뒀다가 나중에 온라인 상태가 되었을 때 업데이트 날짜 비교해서 동기화시키는 기능까지 삭제하고 수정했거든요.

 

다행인 것은 백업/복구 기능에 암호화를 적용했다는 것입니다. 사용자가 백업한 데이터는 즐겨찾기 및 스크랩 단위로 암호화되어 DB에 저장됩니다.

이 기능을 응용하면 즐겨찾기와 사용자가 공유하지 않은 스크랩도 안전하게 서버에 저장하고 가져올 수 있을 것입니다. 다만, 앱 반응과 서버 부담을 고려하여 추후에 추가할 계획입니다.

 

암호화되어 서버에 저장된 백업 데이터