서비스 개발

어제 마무리했던 Appbar 상태 프로젝트를 마무리하고 (블로그 업로드는 오늘 함 ㅋㅋ) 배포 전 실 기기 테스트 중 기능 하나를 더 추가 하고 싶다고 생각했다. 근데 이게 기능인가? ㅋㅋ 여튼 그렇다. 여기 까지만 마무리하고 GA implementation 후 배포 하기로 함! 추가하고자 하는 기능은 상품 Thumnail 을 더 큰 비율로 볼 수 있는 화면과 슬라이더를 제공해주는 것 이다. 너무 쉽잔아... 그렇다 어려운 작업은 아니였으나 기획자인 내가 하기에는 이것도 힘들었다 ㅠㅠ 우석 기획부터 해보자! Product Thumbnail image sldier Flutter SDK 3.16.0 Android Studio Koala 상품상세 제품 사진을 탭 하면 더 큰 비율로 이미지를 탐색할 수 있어요 보고있던 이미지 탭 시 동일한 이미지를 볼수 있어요 이미지를 탭 해주세요 ScrollController Provider Provider 기능탭을 확인해보면 더 큰 비율로 이미지를 확인할 수 있어야 되기 때문에 화면이동이 필요해보인다. 그리고 상세화면에서 보고 있던 이미지 탭 시 이동한 화면에서도 동일한 이미지가 노출되어야 하기 때문에 상태 관리가 필요하다. 페이지 부터 만들어 보자 항상 심플하게 코드를 작성할려고 매우 노력중이다. 이번 이미지 슬라이드도 기획부터 자주 사용하는 기능은 객체로 만들어 관리하다보니 이렇게 코드 심플하게 작성할 수 있어 좋다!!

그동안 건강 상태와 다른 외주 작업으로 BOOTH를 방치하고 있었다. 매일 밤 마다 어찌 마음이 쓰이는지 빨리 회복하고 받은 외주도 빨리 처리하고 싶었다. 이제 외주도 납품했고, 건강도 정상적으로 돌아와 오랜만에 개선작업을 시작했다. 이번 개선작업은 GA implementation 커뮤니티 스토어 image slider에 스토어 관련 이미지 노출 안되는 에러 스크롤 시 appbar 색상 변하는 기능 이렇게 세 가지 인데, 이번 포스트에서는 1번을 제외하는 2,3번 작업을 이야기 해볼려고 한다. 커뮤니티 스토어 이미지 노출 안되는 에러 위 이미지 처럼 상품 상단에 스토어 소직, 프로모션 등 스토어 관련 콘텐츠 이미지가 노출되어야 하는데 어느순간 부터 노출이 안되는 현상이 있었다. 이유가 뭘까? 해당 코드를 확인해보니, article 목록을 불러오는 코드가 limit 10 그러니깐 10개의 아티클을 가져오고 있어다. 만약 아티클을 계속 작성하면 10개 뒤로 밀려 stroe news 아티클을 가져오지 못하고 있었다. 문제는 아티클 목록 api 에서 default 값으로 10개만 가져오고 있기 때문에 두 가지 방법으로 해결 할 수 있다고 판단했다. Controller 에서 store_news 토픽만 sorting 하고 limit 변수를 100으로 설정한다. 지금당장의 에러를 해결할 수 있지만 장기적으로 절대 좋은 방법은 아니다. API 를 새로 만든다. 현재 활동현황을 고려해 선택하면 좋겠다. 지금의 부스는 사용자가 그리 많지 않다. 그리고 API 를 개발할만큼 스터디가 충분하지 않다. 그래서 1번을 선택했다. 우선 노출시키고 추후 활동이 활발해지면 API를 개발하는 방법이 좋겠다고 생각했다.

초기 앱 개발 시 GA 설치는 했다. GA에서 자동 수집하는 이벤트만 실행중이지 정작 중요한 수동 이벤트는 사용하지 않고 있어 이번 기회에 수동 이벤트를 flutter 에 설치해보자! 먼저 수동 이벤트 설치를 위해 GA 문서를 확인해 본다! 이렇게 작성하면 된다. 별도의 함수로 만들어 변수만 받는 구조로 사용해본다! 그럼 로그가 잘 넘어 오는지 테스트 해봐야 한다. 구글 애널리틱스는 로그를 바로 수집하진 않고 1시간 정도 텀이 있다. 이유는 공식문서에 나와있음 ^^ 대신 테스트는 디버그 모드로 실행하고 구글 애널리틱스 DebugView 에서 확인해볼 수 있다! 이제 GA4 DebugView 에 접속해 확인 해보자! 엥? 왜 아무런 반응이 없지? 로그가 안온다!!!! 역시 개발은 한번에 되는게 없다. ㅠㅠ 구글링 해본다! 아니 문서 공식 문서를 본다. 애널리틱스 디버그 모드 사용 설정해줘야 함! 안드로이드 adb shell setprop debug.firebase.analytics.app PACKAGE_NAME 요 코드를 android studio terminal에 쳐준다! PACKAGE_NAME → 요 놈은 어디에 있을까? android[appName_android] / app / main / AndroidManifest.xml 에 있다. 만약 여기에 없다면. 난 없었다. 아래에 있다. build.gradle 여기에 있다. 이렇게 해주면 된다. 활성화 된다! 엇! 터미널에서 adb 코멘드를 실행할 수 없다고 한다. 구글링! 비교적 쉽게 찾았다. SDK Platform tool 을 다운로드 하면 된다. 혹은 이렇게 해줘도 된다.

최근 플러터 버전 업데이트 실수로 등짝이 오싹해지는 경험을 했기 때문에 꼭 알고 있어야 하는 버전 변경 방법을 알아 보고 공유 하고자 함. Flutter 명령어로 변경하기 flutter channel → 특정 채널로 Flutter 버전 변경 채널 master 채널 beta 채널 stable flutter downgrade → 현재 버전의 바로 직전 버전으로 다운 그레이드 flutter upgrad → 최신 버전으로 변경 내가 이용했던 다운그레이드 방법은 "flutter downgrade" 였다. 최선 버전의 직전 버전으로 이동했고, 이때문에 버튼 모양을 전부 변경해야 했다. 특정 버전으로 다운그레이드 하는 방법은 무엇인지 궁금해서 찾아보았다! git 으로 버전 변경이 가능하다는것이다! git 명령어로 변경하기 플러터가 설치된 디렉토리로 이동한다. 폴더 위치를 모르겠다? 터미널 창에서 which flutter 명령어를 이용하자 (bin/flutter 뒤에 붙은 이 위치를 뺀 곳이 플러터 디렉토리) git checkout 2.10.5 → 터미널에 입력해보자. 뒤에 숫자는 다운그레이드 하고 싶은 플러터 버전 번호이다. flutter —version 으로 마지막 버전 체크!

사건발생 Google Playstore Console 에서 메일이 왔다. SDK 업데이트와 API 레벨을 34로 올려 기준에 맞춰달라는 메일 이었다. 요청을 무시할 경우 2024년 8월 12일에 앱 출시를 못한다고 했다. SDK 버전 업데이트 시 플러터 버전에 문제 생김 Android 14 SDK 설치와 API 레벨 34 안드로이드 14 버전 설치를 위해 안드로이드 스튜디오 버전을 체크 해야한다. 안드로이드 개발자 사이트에 나와있는 가이드. 안드로이드 스튜디오 Flamingo version 커트라인에 딱 걸려 스튜디오 버전 업데이트 부터 진행 해야 했다. (정말 하기 싫은 후~) 개발에 관심이 커질수록 공식 문서 검색이 더 많아짐 ㅋㅋ 안드로이드 코알라 버전을 설치했다. 문제는 여기 시작된다. 바보 처럼 Flutter 버전을 최신 버전으로 업데이트 해버렸다. ㅠㅠ 아무리 빌드 할려고 해도 에러가 밣생함. 에러가 발생하는 곳은 Sentry 에서 발생하고 있었는데 이 문제는 구글링 해봐도 나오지 않아 Sentry 본사에 이메일로 문의를 한 상태! 답이 오면 이것도 글로 작성해보겠습니다. 다시 천천히 생각해보았다. 아!! 개발자들은 Git 을 쓰지 되돌리면 되겠는데?? 머리에 스쳐지나갔다. 그때가 새벽 4시 였습니다. ㅋㅋ 여튼 그래서 폭풍 구글링 함. 두 가지 방법이 있어다. Revert? or Reset? 만약 BOOTH 의 깃헙으로 공동으로 작업한다면 revert 가 정답이다. revert에 설명은 지금은 다루지 않고 아래의 링크를 통해 더 자세히 확인해보면 좋겠다.

부스 Version 1.6.3 +98 빌드 업데이트 후 약 4주 만에 1.6.4 +99 버전을 업데이트하기로 했다. 업데이트 내용은 다른 콘텐츠로 더 자세히 작성할 예정임. 지금은 PLA 동의 경고 메세지와 해결방법을 다룰 예정입니다. Xcode 에서 app store connect 로 distribute 하는 과정에서 에러 메세지를 만났다! Unable to process request - PLA Update available! 프로그램 라이센스 동의서를 업데이트 해달라는거다 ㅋㅋ! 그리고 그 밑에 메세지는 동의서를 업데이트하면 자동으로 해결 됨! 자 당황하지말고 먼저 개발장 계정으로 app store connect 로 이동해 접속한다 상단에 이런 메세지가 있다! 애플 개발 프로그램 라이센스 동의서가 업데이트 되었으니 확인하고 서명해달라 이거다! ㅋㅋ 파란색 "account" 를 클릭하면 애플 개발자 사이트로 이동한다! 상단에 딱! "Review agreement" 버튼을 눌러 동의서를 확인해준다! 끝! 다시 xcode 로 이동해 Product → Archive 해준다! 정상적으로 업로드 되는것을 확인할 수 있다!

배경 부스의 개선을위해 3주 정도 고민하고 문득 플레이리스트 공유 방식을 개선하면 좋을 거 같다는 생각이 들었다. 그럼 현재 플레이리스트 공유 방식은 이렇다! 플레이리스트 테마를 정의한다! 테마의 맞는 트랙리스는 구성한다. 보통 애플 뮤직으로 먼저 리스트 업 함. 검증 유투브 뮤직, 스포티파이, 애플 뮤직에 플레이리스트 만들기 앱 내 노출할 이미지 제작 메인 Thumbnail 아티클 Thumbnail 아티클 MainImage S3에 사용할 이미지 업로드 아티클 내용 작성 배포! Push 알림 보내기 개선이 필요해? 개선이 가장 필요한 부분은 3개의 플랫폼의 플레이리스트를 관리하는 것 이었다. 각 플랫폼 (Apple Music, Youtube Music, Spotify)에서 동일한 트랙을 검색해 추가해줘야하는 아주 비효율적인 작업을 해야 하고, 각 플랫폼에 몇명의 유저가 이용하는지 집계하지 않고 있기 때문에 운영 정책 의사결정이 어렵다. 이거보다 더 개선이 필요한건, 비용이다. 앞서 말한대로 유저 사용량을 모르기 때문에 어떤 플랫폼을 우선시 해야 하는지 결정할 수 없어 현재는 3개의 플랫폼 전부 결제해 사용중이다.

부스에서는 Weekly StaffPick 이라는 콘텐츠를 운영중! 이 콘텐츠는 부스의 앨범 크롤링 주기 1주에 2번 (화요일, 금요일) 맞게 매주 수요일 마다 지난주 업데이트 된 앨범 중 좋은 앨범을 소개 해주는 콘텐츠 이다. 초기에는 내가 직접 골라 추천했다! 그러다 보니 앨범을 찾고 앨범에 대한 정보를 찾는 시간과 Weekly Staff Pick 앨범 그래픽 작업도 해야 하기때문에 시간이 너무 오래 걸림! 그래서 Chat GPT를 이용해보리고 함! 이에 따른 Work Flow 는 Album Scrawling DB에서 입맛대로 데이터 조회 후 CSV 혹은 엑셀 포맷으로 다운 받는다 데이터를 gpt 에게 던져 앨범 추천 받는다 한번 더 검증 그래픽 작업 파이버 베이스 Json 작업 후 배포! 이렇게 6가지 단계로 작업을 진행 해야 한다. 여기서 DB 조회에 필요한 쿼리 코드는 다음과 같다

콘텐츠 관리자가 없다. 아니지.... 퇴사 했다. 그래서 관리가 안되고 있다. 어떻게 운영해야 할까? 먼저 자동 업데이트와 수동 업데이트되는 영역을 구분한다. 자동으로 업데이트되는 영역 앨범 수동으로 업데이트되는 영역 홈 - 모아보기 배너 홈 - 스테프픽 홈 - 스토어 배너 홈 - 레코드 스토어 정보 아티클 오리지널 가이드 팁 스토어 정보들 자동화 운영 설계가 필요하다. 하지만 지금 당장 도입은 힘들어 보인다. 수동으로 업데이트해야 하는 영역의 루틴을 효율적으로 관리될 수 있게 현실적인 일정 관리가 필요함. 홈 - 모아보기 배너 발매 리스트

무슨 일 이야? 위 포스트에서 확인할 수 있다. 커뮤글 즉시 거부 기능을 넣어달라는거다. 이 기능을 구현할려면 2 가지 API 가 필요하다. User Block 알리는 API A 유저만의 커뮤니티 글 목록 API API 구조 User Block API A 유저가 B 유저의 글을 블록 신고한다. User ID 를 서버로 보내준다. API body에 {"blockId" : (userId)} 넣어서 요청하면 된다. 우선 포스트맨에서 API를 조회해보았다. .. .. .. 응답에러가 났다. 이유는 개발망에 적용된 API에 운영망 토큰으로 인증했기 때문... 항상 이 부분이 헷갈렸다! 개발망에서 다시 요청을 보냈다 잘 온다! 우선 User 152 를 블록요청을 보냈다. 그리고 이 API 에는 A 유저의 ID 도 같이 보내야 한다. 나중에 이 아이디와 토큰으로 커뮤글 목록을 조회해야 하기 때문! 근데 한가지 궁금증이 생김! 도대체 "blockUserId" 는 뭐지? 담당 백엔드 개발자에게 물어봤다. 테이블 번호라고 한다 ㅋㅋㅋ 블록 요청 코드다. 부스의 요청 구조는 Uri 꾸러미와 Packet (요청 값을 담은) 이루어진 듯 하다. 먼저 int 타입의 유저 아이디를 받아 전달한다. API 주소는 Uris.community.blockUser 에 있다. 이제 UI 에 적용해야 한다. 부스 에는 이미 신고 기능이 있다. 이 기능은 Post Detail 페이지에 다른 기능 추가를 대비에 팝업 메뉴로 만들어 두었다. 따라서 팝업 메뉴에 "블록하기" 메뉴를 추가하고 사용자가 "블록하기" 메뉴를 추가하면 다이얼로그가 노출로 한번 더 확인 하는 절차를 설계했다.

없는 시간 쪼개 준비한 업데이트 심사가 앱 스토어에서 거절 당함 ㅋㅋ 😳 이유를 알아보자! Guideline 1.2 - Safety - User - Generated Content 필요한 precaution 장치 조건 미달 처음에 이 사유를 오전 3시에 받고 이의 신청을 새벽 5시에 함. 그 후 새로고침을 통해 이의 신청 결과 확인 8시까지 하고 잠듬.... 오후 2시쯤 일어나 다시 확인 했을때 여전히 'waiting for review' 상태라 개빡쳐서 expedite review 신청!! Expedite Review Request?? 우리 앱 빨리 리뷰좀 해달라는 요청임!!!! 이거 하니깜 30분내로 'reviewing' 으로 바뀜. ㅋㅋㅋ 여튼 김치어묵 국수 먹으며 기다림. 우 짜증나! 역시 동일한 이유로 심사 거절! 해결방안 유저가 abusive content 발견시 즉시 block 할 수 있는 기능 개발 벌써 머리 아픔! 일시적으로 해결방인이 생각남 다시 심사넣고 기다렸다 블라구버튼 누르면 수동적으로 처리 한다 ㅋㅋ 신고 API 가 이미 있으니 스펙을 확인해 신고한 유저 값이 전달 되면 그 값을 이용해 필터링 한다. 그냥 지워버러 일단 심사를 통과한다. ㅋㅋㅋ 1번 2전은 순간 빡쳐서 나온 생각이니 패스하고 2번을 개발한다.

무슨일이야? 부스는 Navigation Tabbar Icon 탭 시 Refresh 정책이 있다. 이는 사용자에게 화면 이동 시 Updated 된 화면을 제공하기 위해서다. 그리고 Controller가 각 영역에 할당된게 아닌 Home 화면 전체를 다루고 있다. 이 구조를 변경하기에는 공수가 너무 크기 때문에 이번 네이버 스마트 스토어 API 도 같은 구조로 구현되었다. 그러다 보니 Navigation Tabbar Icon 탭 시 불필요한 네이버 API 요청 해야 하고 네이버 정책 상 너무 많은 요청은 429 처리되어 Future.delay 로 1초 이상 기다리는 함수를 추가 했었다. 그리고 네이버에서는 상세페이지 정보에 할인된 가격이나 할인율 json을 제공하지 않기 때문에 목록 검색 api 에서 받아 넘겨야 하는것도 문제가 되었다. 정리를 해보자면 사용자가 navigation tabbar icon 탭 한 후 2초 전에 상품을 탭 하면 null 에러가 난다. 당연하지 아직 호출되지도 않았는데! 이게 문제다. 어떻게 해야 할까? 난 refresh 정책을 변경하기로 했다! 없어진 pull to refresh 환경을 부활시키고 tab to refresh page 함수를 비활성화 하기로 했다. 사실 이 기능이 사용자 경험상 그리 좋지 않다. 탭 시 깜빡~ 이는게 있으니! 하여튼 pull to refresh 환경을 부활 시키기로 결정한 이유는 다음과 같다! 우리가 무슨 주식 앱이냐? 무슨 소리냐면 그렇게 유난 떨며 항시 updated 호면을 보여줄 필요 없다! 맞아 이건 맞는거 같아. 상품 상세로 넘어갈 때 에러 안나게 할려면 최소 1.3초가 필요해! 그렇다면 page refresh는 버려야 한다. 그리고 pull to refresh 에 await 와 혹시모르는 delay duration 을 이용해 최소 1.3초를 기다리게 한다.

사건의 배경 부스에서 상품을 팔아보고자 스토어 오픈 준비를 하고 있다. 자사 몰 구축보다는 접근성이 좋은 네이버 스마트 스토어의 API를 이용해 앱 내 노출하는 방법으로 개발하기로 했다. API 요청은 정상적으로 구현하였지만 언젠가 부터 API 요청 시 429 Error 코드가 나타기 시작했다. 앱 내 상품의 상세정보는 스마트 스토어에서 HTML 정보를 String 값을 받아 보여준다. 이때 첨부된 embed Youtube 링크가 노출되지 않는 현상을 해결하고 하단 고정 플레이어로 개발했지만 Store Detail 화면 이동 시 Null check 에러 코드가 catch 되는 현상이 있었다. 현재는 상품이 4개 이지만 앞으로 업로드해야 할 상품이 약 10개정도 더 있고, 페이지네이션을 미리 구현하고자 했다. 이런 사건들을 해결하고 6월6일 Testflight 와 googleplay 내부 테스트 앱 배포를 목표했다. 해결 방법 429 에러 관련 에러 정보를 리서치했다. 네이버 스마트스토어 공식 문서에는 요청량 제한 초과 라고 함. 하지만 계속 요청하면 또 된다. 리서치 결과 나와 비슷한 오류에 관한 문의를 한 글을 찾아 해결책을 얻을 수 있었다. 에러를 해결할려면 요청사이에 1초 이내의 시간지연이 필요하는거다. 해결 코드 이전 코드 더 나은 코드 스마트 스토어 API 요청 구조는 두 가지로 형성된다. 1. 토큰 요청, 2. 상품 조희. 위 코드는 토큰 요청 전 1초 정도 앱을 멈추는 코드이다. 사용성이 좋지 않다. 부스 앱의 구조는 홈 탭을 눌렀을때 여러개의 함수들이 refresh 되는 구조라 1초 이내의 지연이 있다. 이것을 해결해야 한다. 아래의 코드는 상품을 가져올때 Future.delayed 함수를 사용해 사용자가 느끼는 지연없이 진행된다. 넉넉히 2초를 딜레이 시켰다. 상품 상세 요청 시 첨부된 youTube 링크 에서 videoId 추출 함수에서 null check 에러가 나는 현상 이전 코드 if (storeDetailModel!.originProduct.detailContent != null) 이 함수를 실행하기 위해선 storeDetailModel 이 필요한데 이 모델이 가져오기도 전에 이 함수가 실행되기 때문에 Null 값으로 처리된다. 하지만 ! 표 처리되어 에러가 나는것이다.