글또 9기가 끝나고 나서 블로그에 단 한 편도 글을 쓰지 않았다.

나는 글또 9기가 끝났을 때, 더 이상 스스로 부끄러운 글을 쓰지 않아도 된다는 안도감이 있었다. 그러나, 마음 한켠에는 찝찝한 기분이 가득했다.

지난 글또 9기에서 스스로 건질 만한 글은 단 두 편뿐이었다. 처음 썼던 글과 1월 19일에 쓴 글이었던 것 같다. 시간이 지날수록 예치금을 잃지 않기 위해 억지로 글을 써내려갔고, 글쓰기는 의무적인 작업으로 변질되었다.

나도 처음엔 잘 써야겠다고 다짐했다. 하지만 9월 말, 갑자기 생긴 전세 문제와 빚을 갚기 위해 외주 시장에 뛰어들고 부업도 시작했다. 그러다 보니 금전적으로 직접적인 영향을 주지 않는 블로그 글쓰기는 나에게 큰 부담이 되었다. 그래도 예치금 한 푼 잃지 않으려고 굉장히 애썼다. 지식 전달만 하는 글을 다시 가공해서 쓰는 내 모습이 지겨웠고, 글또의 취지와는 멀어진 글쓰는 기계가 되어버렸다.

나는 글또 10기를 주변 지인들에게 정말 좋은 프로그램이라고 소개했다. 정작 나는 글또 9기에서 좋은 경험을 얻지 못했다. 처음 나갔던 커피챗에 기대가 컸다. 하지만 그곳에서 했던 이야기는 연차나 이직 준비 같은 주제들. 나는 그런 것에 전혀 관심이 없었다. 기술적인 토론을 기대했지만 그 자리에서 어떤 감동도 느끼지 못했다. 아마 나도 상대방에게 감동을 주지 못했을 것이다. 그 자리에 융화되지 않았을테니 서로 그랬을 거라 생각한다.

프론트엔드 개발자끼리 모이면 할 이야기가 얼마나 많은가? 전역 상태 관리, Next.js, react-query, 가상 DOM과 fiber 등 이야기할 주제는 많았다. 그런데도 그 자리에서 나는 이런 대화 주제를 꺼내지 못했다. 가만히 있으면 반은 간다고 했던가? 분위기를 주도하고 싶지 않았고, 이런 대화를 꺼내면 잘난 척하는 사람처럼 보일까 봐 눈치만 보다가 자리를 떠난 내가 문제였다. 그렇게 글또 9기는 나의 기대와는 다르게 종료되었다.

얼마 전, 글또 10기의 모집 소식을 듣고 여러 감정이 오갔다. 이번에도 9기와 같은 실수를 반복하게 될까? 이번에도 바쁘다는 핑계로 형편없는 글을 쓰게 될까? 나는 반복하지 않고자 이번 글또 10기에서는 수없이 쏟아지는 기술 블로그들 사이에서 나만의 생각을 진솔하게 적어보는 시간을 가져보기로 했다. 글또 9기가 끝난 이후에 나의 생각을 정리하는 시간도, 기술을 풀어보는 시간도 지금까지 부족했으니 말이다. 이번 기회에 글 쓰는 시간을 조금 더 즐겁게 활용해보고 싶다.

그리고, 글또 9기에 몸만 담고 있으면 뭐든지 될 줄 알았던 나의 과거를 뒤로하고 10기부터는 커뮤니티를 잘 이용할 수 있길 원한다. 그래서 나와 나와 연결된 모두에게 10기를 소개했던 그 말처럼 좋은 순간을 내 스스로 만들어 나갈 수 있길 바란다.

10월 2일 수요일, AWSKRUG 프론트엔드 소모임에서 지인을 만났다. 그분이 내가 글또에 참가하고 있다는 걸 알아봐 주었고, 부족한 나를 기억해 주셔서 감사했다. 이제 글또 9기가 끝난 후 내가 무슨 일을 했는지 기록해 보려고 한다.

돈이 좀 필요했습니다..

나는 작년 9월 말에 전세 사기 이슈를 겪었고, 12월까지 법적인 문제와 해결책을 얻기 위해서 이리저리 다닌 결과 집이 경매로 넘어갔다. 돈이 당장 필요해져서 12월에 외주 시장에 뛰어들었다. 이번에 만들었던 소주도는 내가 만든 첫 모바일앱이다.

고객사에서는 모바일 앱을 iOS/AOS 둘 다 지원하는 크로스 플랫폼으로 만들어달라는 요청을 하였고, 그 해결책으로 React-Native를 사용하게 되었다. 외주를 하게 되면서 처음으로 영역의 확장이란걸 해보았다. React를 통한 모바일 웹뷰는 만들어 보았지만 새로운 사람들과 하는 모바일 앱 개발은 이번이 처음이었다. 그러면서 모바일에 대한 특성에 대해서 여러 방면으로 알게 되었고, 생각지도 못한 것들에 대한 디테일을 배워볼 수 있었다.

외주를 하면서 회사와는 다른 새로운 도메인을 만날 수 있었고, 가장 최신의 버전의 도구들을 사용할 수 있어서 학습하기도 너무 좋았다. 그러나 난 React-Native가 어떻게 활용되는지 잘 모르고 있었고, React-DOM과는 전혀 다른 환경에 항상 당황할 수 밖에 없었다.

View와 Div는 같은게 아니었나?

React-Native를 하면서 가장 처음 했던 실수는 바로 View 태그 안에 글자를 넣는 것이었다.

<View>이거 왜 안되냐</View>

View == div(==: 일치가 아닌 유사함) 인 줄 알았지만 View 안에 글자를 넣으면 빌드가 되지 않는 에러가 있었다. 이 문제는 생각보다 가끔 곤란하게 만들었다.

글쓴이는 세미콜론(;)을 붙이는 린팅을 이용하고 있다. 그러다보니 커진 컴포넌트를 분리하거나 공통 컴포넌트를 합칠 때 문제가 발생한다.

<View>
  <Text>이건 또 왜 안되냐</Text>;
</View>

이런 사건을 겪고나니 정해진 태그만 사용하게 만드는 React-Native를 사용하면서 HTML의 시맨틱 태그의 중요성을 한번 생각하게 되었던 것 같다. React-DOM에서 사용하는 수많은 태그들 중 div로 떡칠하거나 무분별하게 사용한 태그들에 고민을 하게 되었고, 내가 사용한 태그들이 의도가 명확한지 찾아보고 가끔식 MDN에서 찾아보기도 했다. 매번 중요하다고 하지만 강제하지 않다가 이렇게 React-Native에서 태그를 강제하니 React-DOM 에서도 지켜 쓸 수 있도록 조금은 예민해진 것이 도움이 되었다고 생각한다.

너는 그저 크로스 플랫폼이니까.

[지금껏 경험 못했던 싼 술집을 찾아주는 지도]를 만들어야 했기에, React-Native 지도 라이브러리를 찾게 되었다. 해당 앱에서는 카카오 로그인을 기반으로 하니까, 카카오 지도를 사용해보기로 했다.

react-native-kakao-maps

0.0.12 버전의 이 라이브러리는 들어가보면 알겠지만, readme.md의 설명이 너무 부족하였다.
왜냐면, kakao에서 공식적으로 지원하지 않는 라이브러리이며, 개인이 kakao 지도 API를 react-native에서 사용할 수 있게 패키징해서 만든 것이다. 지도를 커스터마이징 해야하는 내가 쓰기엔 지원하는 기능이 너무 작았다.

import { KakakoMapView } from '@jiggag/react-native-kakao-maps';

return (
  <KakaoMapView
    markerImageName="customImageName" // 옵션1
    markerImageUrl="https://github.com/jiggag/react-native-kakao-maps/blob/develop/example/custom_image.png?raw=true" // 옵션2
    markerList={[
        {
          lat: 37.59523,
          lng: 127.08600,
          markerName: 'marker'
        },
        {
          lat: 37.59523,
          lng: 127.08705,
          markerName: 'marker2'
        },
    ]}
    width={300}
    height={500}
    centerPoint={{
        lat: 37.59523,
        lng: 127.08600,
    }}
    onChange={(event) => {
      // event.nativeEvent
    }}
  />
);

Readmd에는 코드가 공유되어 있다. 나는 앱에 지도를 띄우고 마커를 찍는 것까지 성공하였으나 여기서 지도를 활용해야하는데 자체적인 커스텀 자체가 React-Native로 하기엔 부족하였다. import에는 KakakoMapView 외에는 없었고, 간단하게 사용하기 좋았겠지만 다양한 부분을 커스텀 해야하는 나에게는 좋지 못한 선택이었다.

다음처럼 지금 사용해야 하는 이미지는 적어도 파란 것을 뺀 4개였다.

나는 방법을 모색해보았지만, 의미가 없음을 깨닫고 Naver는 그래도 괜찮겠지 하며 네이버 지도를 찾아보았다.

react-native-naver-map

2019년에 마지막으로 업로드 된 네이버 맵을 보며 혹시나 하는 마음에 넣어보았지만... 제대로 동작하지도 않았다.
(오늘 글을 쓰기 위해서 찾아보니 개인이 운영하는 새로운 Naver 지도 API를 이용한 React-Native 라이브러리가 나온 것 같다. (mym0404/react-native-naver-map))

국내 지도 API로는 React-Native를 제대로 지원하지 않는 것에 아쉬움을 많이 느꼈다. AOS와 iOS 그리고 Flutter는 지원해주지만 React-Native는 지원해주지 않는게 좋지 않았다. Web View로 사용하면 되는데 왜 React-Native를 고집하는가 싶을 수 있지만, Web에서 사용할 경우 생기는 다운로드 리소스를 줄이고 싶었다. 최대한 다운로드 받는 양을 줄이고 유저가 원활하게 사용할 수 있도록 하는게 나의 목표였다.

react-native-maps

나는 react-native를 공식적으로 지원해주지 않는 naver와 kakao에 맞춰서 개발할 여력이 없었다.
정말 많은 사람들이 사용하고, 업데이트도 지속적이고 관리되고 있는 react-native-maps를 사용하기로 하였다.

앱의 핵심 라이브러리를 3번이나 바꾸다보니 이젠 마지막이었으면 하는 마음으로 지도 라이브러리를 설치하였다.

이전 라이브러리와는 달리 친절한 안내 문서와 분리된 API는 나에게 있어서 너무 큰 단비였다. 지도는 해당 라이브러리를 통해 개발에 성공하였다.
그리고 또 다른 문제를 맞이하였다.

Marker 또한 컴포넌트인걸?

지도 앱에 마커만 뿌리면 되겠지 했지만 마커를 뿌리자마자 AOS 개발모드에서 갤럭시 Z Flip3 친구가 뻗어버렸다. 허허..
왜 뻗었는가? 찍어야 하는 마커가 700개가 넘었기 때문이었다. 지도의 맵과 마커는 전혀 다른 컴포넌트였고, 그 사실을 간과했다.

나는 웹 개발에서 라이브러리를 쓰면서 issue 탭을 들어가 본 적이 거의 없었는데, 살면서 가장 많이 들어갔던 것 같다.

Custom Markers not rendering completely in React Native IOS when number of marker or marker size increases

유사한 issue들을 찾아보면서 어떻게 해결할까 고민이 많이 되었다.
일단 마커가 너무 많으니 렌더링 해야하는 마커의 수를 줄여야겠다는 생각이 들었다.

지도를 움직일 때마다 내가 보는 지역을 기준으로 설정한 반경의 마커들을 찍어보자.

• 모바일에서는 지도를 움직이면 설정한 반경으로 API를 요청하고, 마커를 저장한 배열에 추가한다.

또 문제가 발생했다. 마커를 계속 추가하다보니, 렌더링하는 마커가 많아져서 그런지 버벅이기 시작했다.
서울에만 거의 500개 가까운 매장이 주류를 저렴하게 취급하기 때문에 그런지 순식간에 버벅거렸다.

그러면 기존 마커가 아닌 무조건 새 마커만 찍을 수 있도록 해보자.

• 모바일에서는 지도를 움직이면 설정한 반경으로 API를 요청하고, 마커를 저장한 배열에 추가한다. -> 덮어씌운다.

또 문제가 발생했다. 기존의 마커가 리렌더링 되는게 너무 꼴보기 싫었다.

그러면 기존 위치에서 일정 위치만큼 이동하면 API를 호출하자.

• 모바일에서는 지도를 움직이면 설정한 반경으로 API를 요청한다.
• 요청했던 Param(위도, 경도)을 저장한다.
• Response된 마커를 지도 위에 그린다.
• 일정 위치만큼 이동하면 다시 API를 요청하고, 요청한 Param(위도, 경도)를 저장한다.

또 문제가 발생했다. 일정한 위치의 기준이 너무 애매해졌다.

이렇게 며칠 밤을 고민하다가 문득 카카오맵을 사용해서 맛집을 찾으려는데 신기한 버튼이 있다는 걸 깨달았다.

이 지역 재검색 버튼.

나는 이 버튼을 보면서 "내가 임의로 API를 요청하는게 사용자는 원치 않을 수 있겠다"는 생각이 들었다. 내가 원하는 위치에서 검색을 하고 싶을텐데 움직일 때마다 요청을 하니 불편하다는 것을 깨달았다. 그래서 나도 [이 지역 재검색] 버튼을 만들었다.

• 모바일에서는 지도를 움직이면 설정한 반경으로 API를 요청하고, 요청한 Param(위도, 경도)를 저장한다.
• Response된 마커를 지도 위에 그린다.
• 위치를 이동할 때마다 해당 위치를 내부 변수에 저장하고, 이 지역 재검색 버튼을 노출한다.
• 이 지역 재검색 버튼을 누르면, 해당 위치를 기준으로 API를 호출한다.

다른 지도 앱들처럼 해결하고 나니, 사용하기 부드러워졌다. 카카오맵 앱에서도 [이 지역 재검색] 버튼이 있는 이유를 알게 되었다. 이 버튼은 사실 앱이 출시된 이후에 들어올 정도로 굉장히 늦게 들어왔다. 다들 느리다고 하니까 "클러스터링을 하자!" 등 여러가지 의견이 나왔지만 이렇게 간단하게 해결할 수 있어서 고객사에서도 매우 만족하였다. 생각보다 내가 가진 문제를 한 가지 방향으로 풀려고 하다보니 시각이 막히기도 했고, 부족한 앱을 출시했어서 부끄럽기도 하다.

이것 외에도 다양한 문제를 만났었지만 지도가 메인인 작업인만큼 지도와 마커에 대한 문제를 적어보고 싶었다.

여담

프로젝트를 시작하기 전에 지도 관련해서 많이 찾아보다보니 유튜브 숏츠에서도 지도 앱이 떴었다.
리액트 네이티브로 앱개발 두시간컷!

해당 개발자분께 개인 블로그까지 찾아가서 연락을 하였고, 기술 스택에 대해서 도움을 받을 수 있었다. 그때, 개발자라는 직업에서 공유도 잘해주는 문화가 참 좋았고, 나에게 팁을 준 개발자는 지금 국방의 의무를 수행 중이다. 학생 때부터 이렇게 두각을 나타내는 개발자를 만날 때마다 신기하고 응원을 보내고 싶다. 정한 Rycont

---

[개발자 멘토링 플랫폼: Next Pro]에 지원팀 합류.

커뮤니티 활동을 많이 하다보니, 자연스럽게 멘토링 플랫폼 부업 제안이 왔다. 그런데 난 대기업 출신도 아니어서 내가 멘토링을 할 순 없으나 동업을 제안하신 분께서 나의 열심히 하는 모습이 보기 좋고 지금 전세사기 문제에 조금이라도 도움이 되었으면 좋겠다고 이야기 해주셨다. 멘토링 플랫폼을 시작하게 되면서 처음으로 이것저것 처음 해보는 것들이 많았다.

도메인 구매를 처음 해본 사람.

누구나 한번은 살면서 해볼까 말까한데 딱히 개인 사이트도 없어서 구매할 일이 없었다. 그런데 이번에 지원팀으로 일하면서 도메인을 구매하게 되었다. 도메인 구매는 가비아에서 구매를 했는데 개인적으로 간편하게 연결할 수 있었다. 회사에서 cafe24에 있는 도메인을 가져와서 연결해 본 적이 있긴한데 그것보다는 간편했던 것 같다.

이번 섹션은 너무 초보자 같은 느낌이지만 도메인 구매는 처음이라...

신뢰를 주는 웹사이트 만들기.

다양한 멘토링 사이트를 보았지만, 뭔가 SI에 맡긴 것 같은 디자인이 거슬렸다. 잘하는 것처럼 보일 수 있는 방법이 없을까? 고민을 했고, 디자인을 잘 꾸며내는 수 밖에 없다고 생각했다. 새로운 멘토링 플랫폼으로 신뢰있는 디자인은 중요한 요소였다. 그런데, 여기... 디자이너가 없다.

첫 디자인은 공식 문서 만들 때 많이 사용되는 docusaurus를 사용해보았다.

미적 감각을 포기한 것과 같은 디자인..? 성의가 없어 보여서 나의 디자인 능력을 의심할 수 밖에 없었다. (글쓴이는 패션 디자이너 어머니와 재단사 아버지 사이에서 태어났다. 마마파파 암 소 쏘리..)

그러다가 멘토님 중 한분께서 Saasfly를 추천해주셧다.
이 디자인을 잘 이용해보면 좋은 사이트를 만들 수 있지 않을까? 싶어서 이것저것 추가해보았다.

https://www.next-pro.co.kr/

최종 완성된 웹 사이트이다. (gif가 좀 느린 것 같다..)

웹 사이트의 개발 및 유지보수를 담당하게 되었고, 나름 볼만한 사이트를 만들었는데 부족한 점이 많다. 디자인 에셋을 만들 수 있었다면 얼마나 좋을까 싶기도 하고 디자인을 할 수 있었다면 얼마나 좋을까 싶기도 했다.

간략하게 홍보하기

웹 페이지도 만들었으니 홍보를 하고, 수강생들의 이력을 관리하고, 공지사항도 쓰고, 커뮤니티도 관리하고 기타 등등 하고 있다. 멘토님들은 소프트웨어 마에스트로 멘토 출신이기도 하고 현재 국내 1티어 기업에서 시니어 현역이셔서 실력은 너무 훌륭하셔서 여느 다른 멘토링들과 견주었을 때, 평균은 뛰어넘는다고 생각한다.

얼마 전, 멘티분들 중 한 분께서 토스에 최종 합격했다는 소식을 들었다. Next Pro를 시작한지 3개월만에 이뤄낸 결과이기도 하고 좋은 멘토, 좋은 멘티분이어서 가능했던 일이라고 생각한다. 혹시나 관심 있다면..?(홈페이지)

개인적으로 지원팀으로 일하면서 이렇게 기술적인 커뮤니티에 관심이 많은 멘토님들과 함께 일을 할 수 있게 되어서 영광이기도 하다.

대충 이런 느낌이랄까...

---

글또 9기가 끝난 뒤, 공백의 이야기를 써보았다.
잠깐의 외주를 끝내고, 멘토링 플랫폼을 통해서 웹 프론트엔드였던 내가 했던 일과는 다른 일을 해오고 있어서 신기했다. 외주는 끝났지만, 모바일 개발에서 배포부터 출시까지 경험을 해보았고, 마켓팅을 통해 수강생들을 모집하면서 너무 재밌는 시간을 보냈다. 얼마 전에는 회사에서 웹 게임 개발을 해보자고 하셔서 Phaser를 이용하여서 플래시 게임을 간단하게 만들어보았다.

이제 글또 10기를 시작하게 되었다. 공백기 동안에 크게 나 자신의 흔적을 남기거나 한 일이 잘 없기도 하고, 기술적인 탐구를 거의 하지 못했다. 앞으로는 기술적인 탐구도 하고 진솔하게 나의 이야기들을 써내려가는 블로그를 쓸 수 있도록 노력해야겠다. 그런데 이 글 쓰는데 3일 정도 걸린 것 같다...

꾸준히 3일은 투자할 수 있는 내가 되었으면 좋겠다.