퍼스트프렌드를 앱 대신 웹으로 만드는 이유

앱에서 웹으로 바꾼 이유

퍼스트프렌드는 처음에 앱으로 만들려고 했습니다. 개발 난이도와 이용자의 사용 경험을 생각했을 때 앱이 더 나은 선택이라고 판단했습니다. 그런데 서비스를 어떤 경로로 알릴지 생각하다 보니, 동물을 보려는 사람에게 앱 설치부터 요구하는 것이 맞는지 고민하게 됐습니다.

퍼스트프렌드의 첫 번째 원칙은 보호소 동물과 입양 희망자 사이의 불필요한 허들을 줄이는 것입니다. 관심 가는 동물이 있어 링크를 눌렀는데, 스토어에 들어가 앱을 설치해야 사진과 정보를 볼 수 있다면 그 과정에서 관심이 끊길 수 있다고 생각했습니다.

그래서 앱으로 시작하려던 계획을 바꾸고 웹으로 개발하고 있습니다.

인스타그램에서 시작해 가족에게 전달되는 링크

처음부터 퍼스트프렌드를 알릴 곳으로 인스타그램을 생각했습니다. 검색으로 들어오는 이용자는 초기에는 많지 않을 것이라고 예상했고, 혼자 운영하는 서비스가 펫샵과 검색광고 비용으로 경쟁하기도 어렵다고 판단했습니다. 우선 인스타그램 게시물과 알고리즘을 통해 사람들에게 보호소 동물과 서비스를 알릴 계획을 세웠습니다.

이때 떠올린 초기 이용자는 10대부터 20대 후반이었습니다. 인스타그램 전체 이용자에 대한 통계라기보다, 퍼스트프렌드의 콘텐츠에 반응할 사람들을 그렇게 예상했습니다. 그중에는 아직 부모님과 살거나 동거인과 생활하는 사람도 있을 것이고, 입양을 결정하려면 함께 사는 사람들과 상의해야 한다고 봤습니다.

앱 설치는 이 과정에서도 부담이 될 수 있었습니다. 처음 동물을 발견한 사람은 관심이 생겨 설치하더라도, 링크를 전달받은 부모님이나 동거인까지 같은 과정을 거쳐줄지는 알 수 없었습니다. “이 동물 한번 봐봐”라고 보냈을 때 상대가 바로 사진과 정보를 볼 수 있어야 대화를 시작하기 쉽다고 생각했습니다.

웹에서는 같은 상세 페이지의 링크를 보내 함께 볼 수 있습니다. 동물을 처음 발견한 사람뿐 아니라, 그 사람이 상의할 상대도 별도의 설치 없이 정보를 확인할 수 있다는 점이 중요했습니다.

직접 보고 달라진 보호소 동물에 대한 생각

보호소 동물 공공데이터를 처음 살펴봤을 때 정말 놀랐습니다. 이렇게 귀엽고 사랑스러운 친구들이 많이 있다는 사실을 그전에는 몰랐습니다. 어린 강아지와 고양이도 있었고, 다 자란 동물 중에서도 자꾸 사진을 다시 보게 되는 친구들이 많았습니다.

펫샵과 보호소의 입양 차이를 생각할 때 제가 주목한 것은 노출과 접근성, 그리고 브랜딩이었습니다. 어떤 동물이 있는지 볼 기회가 적고, 정보를 알아보거나 방문하는 과정이 어렵다면 관심을 갖기도 어렵습니다. 보호소라는 말에서 떠올리는 이미지 역시 동물을 보기 전부터 선택에 영향을 줄 수 있다고 봤습니다.

노출과 접근성은 지금의 퍼스트프렌드에서 다룰 수 있는 부분입니다. 인스타그램으로 동물을 알리고, 링크를 누르면 설치 없이 사진과 정보를 확인하도록 하는 이유입니다.

당근마켓의 익숙한 UI를 참고한 것도 접속하자마자 최대한 많은 동물을 살펴보게 하고 싶어서였습니다. 사용법을 익히는 데 시간을 쓰기보다 사진을 보면서, 펫샵에 가지 않더라도 자신이 바라던 친구를 만날 수 있다는 사실을 알게 되기를 바랐습니다.

그래서 동물을 살펴보고 정보를 공유하는 과정에는 회원가입이나 로그인을 요구하지 않았습니다. 인스타그램에서 들어온 사람도, 가족에게 링크를 받은 사람도 같은 정보를 바로 확인할 수 있도록 했습니다.

보호소 동물을 어떤 이미지와 이야기로 소개할지는 앞으로 풀어갈 브랜딩 과제입니다. 제가 처음 사진을 보며 놀랐던 것처럼, 이용자도 “이렇게 사랑스러운 친구가 있었네” 하고 발견할 수 있기를 바랍니다.

웹에서 맞춰야 했던 화면과 이미지

웹을 선택하면서 어려워진 부분도 있었습니다. 기기와 브라우저가 달라도 비슷한 품질로 보여주고 싶었지만, 실제 화면은 예상처럼 일정하지 않았습니다.

공공 API에서 가져온 동물 사진은 크기와 용량이 제각각이었습니다. 목록을 열면 어떤 사진은 먼저 나오고 다른 사진은 늦게 나타나 화면이 듬성듬성 채워졌습니다. 여러 동물을 한눈에 살펴보게 하려던 의도와 맞지 않았습니다.

이 문제는 사진을 미리 일정한 크기의 썸네일로 변환하고, 목록에서 이미지가 표시되는 시점을 조정하는 코드로 대응했습니다. 사진을 가져오는 것뿐 아니라 여러 장을 함께 보여주는 방식까지 다뤄야 했습니다.

브라우저마다 주소창과 하단 도구 모음의 크기, 스크롤할 때 움직이는 방식이 다른 점도 어려웠습니다. 같은 모바일 화면이라도 브라우저에 따라 실제로 사용할 수 있는 공간이 달랐습니다. 당근 SEED를 활용하면서도 퍼스트프렌드가 열리는 웹 환경에 맞게 배치와 동작을 조정해야 했습니다.

설치 없이 접속하게 만드는 대신, 이렇게 서로 다른 환경에서 화면을 맞추는 작업을 감수해야 했습니다.

다시 찾아오는 사람에게 남는 불편

초기에는 이용자의 95% 이상이 모바일로 접속할 것이라고 예상했습니다. 그래서 처음 들어왔을 때의 경험만큼, 잠깐 살펴본 뒤 다시 찾아오는 상황도 고민했습니다.

웹은 접속했다고 해서 홈 화면에 아이콘이 생기지 않습니다. 나중에 같은 동물을 다시 보고 싶다면 이전에 받은 링크나 방문 기록을 찾거나, 서비스 주소를 기억해야 합니다. 앱이 설치되어 있다면 아이콘을 눌러 돌아올 수 있으니 이 부분에서는 앱이 더 나은 선택이라고 봤습니다.

지금은 처음 동물을 발견하고 다른 사람과 공유하는 과정을 우선했습니다. 재방문하는 이용자가 많아진다면 이 선택도 다시 살펴볼 필요가 있다고 생각합니다.

혼자 개발하며 체감한 웹의 장점

아직 인스타그램에 퍼스트프렌드를 공개하지는 않았습니다. 대신 지인들에게 프로토타입 테스트를 부탁하면서 웹으로 만들기를 잘했다고 느낀 순간이 있었습니다.

저는 혼자 개발하기 때문에 사무실에서 옆 사람에게 화면을 보여주며 확인을 부탁할 수 없습니다. 지인에게 링크를 보내 사용해보도록 하고, 불편한 부분을 전달받는 방식으로 테스트했습니다.

피드백을 반영한 뒤에도 같은 링크로 수정된 화면을 다시 보여줄 수 있었습니다. 바꾼 부분을 바로 확인받을 수 있다는 점이 좋았습니다. 웹을 선택할 때는 이용자의 설치 부담을 먼저 생각했지만, 개발 중 의견을 주고받는 과정에서도 도움이 됐습니다.

로그인과 입양 전 점검을 남겨둔 이유

동물을 살펴보는 데에는 로그인이 필요 없지만, 관심 동물을 스크랩하려면 로그인하도록 했습니다. 저장한 정보를 이용자와 연결해야 하기 때문입니다.

로그인 없이 저장하게 만들 수도 있었습니다. 다만 관심 동물을 남기는 순간에는 한 번쯤 자신의 선택을 의식했으면 했습니다. 동물을 쇼핑몰 상품처럼 가볍게 담아두기보다, 정말 관심이 있는 친구인지 생각하는 절차가 되기를 바랐습니다.

서비스 안에서는 덜어낸 것보다 붙인 정보와 기능이 더 많습니다. 공공 API가 제공하는 동물 정보에 보호소까지의 거리와 연락처를 연결하고, 입양 환경 점검과 돌봄 계산기, 준비 체크와 상식 퀴즈를 추가했습니다.

입양을 알아보는 과정의 불편을 줄이면서도, 함께 살기로 결정하기 전에 확인할 내용은 충분히 보여주고 싶었습니다. 동물에게 관심을 갖는 일과 실제로 돌봄을 책임지는 일 사이에는 생각하고 준비해야 할 것들이 있기 때문입니다.

반복 방문과 지속적인 참여를 위한 앱

앞으로 퍼스트프렌드를 반복해서 방문하는 이용자가 많아지고, 보호소 후원이나 봉사 신청처럼 꾸준히 참여하는 기능이 필요해지면 앱 버전도 개발하려고 합니다. 그때는 홈 화면에서 바로 접속하고, 자주 사용하는 기능을 편하게 이용하는 경험이 더 중요해질 것이라고 생각합니다.

지금 준비하고 있는 첫 만남은 인스타그램에서 시작됩니다. 게시물을 보고 관심이 생긴 사람이 동물 정보를 확인하고, 가족이나 동거인에게 링크를 보내 함께 이야기하는 장면입니다. 그 과정에 앱 설치가 먼저 놓이지 않도록, 퍼스트프렌드는 웹으로 시작하고 있습니다.