필터버블을 깨보자, fairpointnews.com
Codeworks 그룹 프로젝트 후기
Codeworks의 마지막 과제는 3-4명이 한 그룹이 되어 2주 동안 풀스택 앱을 만드는 것이었는데, 프로젝트 주제 아이데이션, 코어 기능 기획, 와이어 프레이밍, 프레젠테이션 준비하는 시간 등등을 빼면 코딩에 오롯이 쓸 수 있는 시간은 대략 10일뿐이어서 시간이 엄청 빠듯했다. 시간 압박에 너무 시달려서 그랬는지 2주 동안은 심지어 꿈도 코딩하는 꿈을 꿨다....그렇게 숨 가쁜 시간을 잘 견뎌내서 어제 드디어 그룹 프로젝트를 끝냈고 2주 동안 못 잤던 잠을 몰아서 열두시간쯤 자고 일어나니 이제 머리가 정상으로 돌아온 느낌이다ㅋㅋ
암튼간에 내가 속한 그룹은 Fairpoint news라는 뉴스 앱을 만들었다. 사실 이건 다른 친구의 아이디어였는데 정작 이 아이디어를 낸 Matt은 다른 그룹으로 갔닼ㅋㅋㅋㅋ뜻밖의 홍철 없는 홍철팀 같은 상황... 그래서 아이디어의 모티브는 Matt에게서 얻었지만 세부 기능은 전부 우리가 다시 기획했다.
이 앱을 만든 이유는?
우리 팀 멤버들이 가장 크게 공감했던 문제는 대형 플랫폼사의 알고리즘에 의해 사람들은 뉴스를 보더라도 본인이 좋아하는 뉴스만 보게 되어 결국 필터 버블 안에 갇혀버린다는 것이었다. 보고 싶은 것만 보고 믿고 싶은 것만 믿게 되는 확증편향 때문에 결국 사람들이 더 이상 생산적인 토론은 하지 않고 다른 견해를 가진 사람들을 비난하고만 있는 상황을 개선해보고 싶었다.
Fairpoint를 소개합니다
이 필터 버블을 깨기 위해 우리가 생각해낸 아이디어는 같은 주제의 이슈를 다루는 다양한 언론사들의 기사를 한 번에 모아서 보여주자는 것이었다. 그리고 사용자가 무의식적으로 한쪽으로 편향된 기사들만 계속 읽게 될 때에는 한쪽의 정치적 견해만을 소비하고 있음을 알려주는 알림장치를 만드는 것이었다.
일단 앱에 접속하면 지금 실시간 탑 헤드라인 기사 주제들을 모아서 보여주고, 옆으로 스와이프 하면 세부 카테고리별로 기사를 볼 수 있다. 그리고 각 스토리들을 클릭해 세부 페이지로 이동하면 큰 주제 타이틀과 함께 좌편향 / 중립 / 우편향 언론사들의 헤드라인들을 모아서 보여주고, 타이틀을 클릭하면 언론사 홈페이지들로 리다이렉팅된다. Json 형태로 실시간으로 뉴스 데이터를 받아오려면 유료 api를 사용했어야 했는데 굳이 우리는 비싼 api 비용을 감당하고 싶지 않았다..ㅎ 그래서 Puppeteer, Cherrio npm package로 크롤러를 만든 후, 구글 xml 피드와 실제 구글 뉴스 피드를 모조리 스크래이핑한 후 자체 서버에 뉴스 데이터들을 저장해두고, 프론트엔드는 우리 서버에서 뉴스 데이터를 받아오도록 구현했다.
구글 계정으로 로그인하고 나면 기사 클릭 히스토리를 실시간으로 분석해서, 우편향 기사를 더 많이 클릭하고 있는 경우 배경 색을 점점 진한 파랑으로 바꾸고, 좌편향 기사를 더 많이 클릭하고 있는 경우에는 배경색을 점점 진한 빨간색으로 바꾸는 옵션을 주어서 유저가 균형 잡힌 시각으로 뉴스를 소비하도록 유도하는 넛지 기능을 만들었다. (영국 정당 기준이라 진보 상징색은 빨간색, 보수 상징색은 파란색이다..ㅎㅎ)
기사 소비습관이 좌편향이었을 땐 배경이 공격적인 빨간색이었다가 균형 있게 기사를 읽고 나니 배경이 하얀색으로 돌아왔다.그리고 유저가 기사를 10개 이상 클릭한 이후부터는 Analytics 페이지에서 현재 기사 소비 습관을 분석해서 현재까지 어느 언론사를 통해 몇 개의 기사를 읽었는지, 뉴스 소비패턴이 어느 정치적 견해 쪽으로 치우치고 있지는 않은지, 읽은 기사들의 주제들은 무엇이었는지를 대시보드를 통해 보여준다. 대시보드 내의 차트들은 실시간으로 유저들의 클릭수를 반영해서 업데이트되고, 소비습관에 따라 다른 메시지를 렌더링한다.
이 프로젝트에서 배운 것들
솔로 프로젝트 때와는 다른 기술 스택을 쓰고 싶었는데 (리덕스라던가..타입스크립트라던가..) 팀 멤버들이 익숙한 기술 스택으로 최대한 보기 좋은 앱을 만들자고 해서 그냥 프론트엔드는 리액트, 백엔드는 Express, mongoDB Atlas를 이용해 구현했다. 내가 이 프로젝트에서 했던 것은 Passport.js로 로그인 모듈 구현하기, 유저 클릭 패턴을 분석해서 배경화면 색 바꾸는 기능 만들기, 유저의 클릭 히스토리를 분석해 Analytics dashboard를 만드는 일이었다. 솔로 프로젝트에서는 API와 데이터베이스에서 받아온 데이터들을 잘 뿌려주기만 하면 됐었는데, 이번에는 유저의 로그인 여부, 행동 패턴에 따라 페이지 렌더링 조건을 다르게 걸어줬어야 했어서 저번 프로젝트보다는 좀 더 까다로운 바닐라 자바스크립트 테크닉과 리액트 훅 로직이 필요했다. 특히 이번에 처음으로 로그인 모듈을 풀로 다 구현해봤는데 백엔드, 프론트엔드, 구글 서버가 어떻게 연결되는지 큰 그림이 이해가 잘 안 가서 엄청 고생해서 구현했다...사실 알고 나면 그렇게 복잡한 것도 아니었는데ㅠㅠ 게다가 깃허브에 코드를 푸시하고 다른 친구들의 코드와 머지할때마다 자꾸 로그인 모듈이 망가져서 그거 디버깅하느라 넘 스트레스였다ㅠㅠ
모두를 충격에 빠뜨린 나의 새벽 두 시 커밋..ㅋㅋ무엇보다도 이번 그룹 프로젝트에서는 다른 개발자들과 협업해서 일하는 방법에 대해 많이 배웠다. 지금껏 깃허브는 그저 내 코드를 백업해두는 용도로만 썼었는데, 다른 개발자들의 코드와 내 코드를 머지해가면서 작업하는 방식을 처음으로 제대로 겪고 나니 이제 깃허브에 많이 익숙해진 것 같다. 그리고 다른 사람들의 코드를 쪼개 보고 리팩토링하면서 좋은 코드란 무엇인가에 대해 곰곰이 생각해보는 기회가 됐다. 그리고 코드 컨벤션의 소중함도...^^......왜 코드 컨벤션을 어기면 개발자들이 그렇게 싫어하는지 이제 좀 이해가 간다ㅋㅋ
이번 프로젝트는 실제로 Heroku를 통해 디플로이 된 프로젝트라서 누구든 아래 링크로 접속하면 이용할 수 있다. (***꼭 모바일로만 봐주세요***) 멤버 별로 도메인 이름 10개씩 찾아와서 치열하게 토론한 끝에 결국 내 아이디어였던 fairpointnews로 도메인 이름을 결정했다!ㅋㅋ
아직 최적화가 덜 되어서 초기 로딩타임이 길고 구형 디바이스들에서는 레이아웃이 깨지는 등등 개선해야 할 점이 아직 많다... 그래도 2주 전만 해도 머릿속에만 존재했던 아이디어인데 동료들과 협업해서 진짜 사용할 수 있는 제품을 만들어냈다는 게 뿌듯하다. 퍼포먼스 마케터였을 때는 아무리 내가 매체 운영을 열심히 해서 효율이 좋아졌다 해도 정말 그게 내 성과일까 스스로 의구심이 들곤 했다. 온갖 매체들로 아무리 크리에이티브, 타겟팅, 키워드를 지지고 볶아 숫자를 개선시켜봤자 근본적으로 브랜드를 성장시키는 데엔 한계가 느껴져 답답했었다. 좋은 제품과 브랜딩이 뒷받침되지 않는 한 퍼포먼스 마케팅이란 그저 대형 플랫폼사들의 주가만 올려주는 일이 아닐까, 사실 내 실력이란 거품에 불과한 게 아닐까 늘 불안했었다. 그치만 프로그래밍으로 성취해낸 것들은 그것이 아직 엉망진창일지언정 정말 내 실력으로 만들어낸 결과물이라고 자신 있게 말할 수 있어 뿌듯하다. 고작 몇 줄의 코드를 동작하게 만드는데 하루 종일 머리를 쥐어뜯고 뜬눈으로 밤을 새웠어도, 고통스러웠던 만큼 내가 성장하고 있다는 게 느껴져서 성취감과 희열이 느껴지는 11주간이었다.
프로그래밍 공부란 이 곡선을 무한히 반복하는 것...ㅋㅋ이제 부트캠프는 거의 끝나가지만 겨우 시작점에 선 기분이다. 이제는 링크드인과 깃허브, CV를 갈아엎고 진짜 잡마켓에 도전해볼 차례다. 앞으로 수도 없이 나는 바보 멍청이인가 싶은 순간을 겪어야 하겠지만, 그 괴로움을 견디고 나면 어떤 모습으로든 성장해있을 거라는 믿음이 생겼다. 수도 없이 겪을 절망의 순간에도 좌절하지 말고 내가 정말 사랑하고 즐기는 일을 찾을 수 있도록 노력해야겠다.
**프로젝트 진행 내용을 더 자세히 보고싶다면 이쪽으로 와주세요
