[2022] 1년동안 FE 개발자로 일하면서 나는 얼만큼 성장했을까?

howyoujini·2022년 12월 31일

2022 프론트엔드 개발자 회고

나의 2021년의 마무리는

나의 첫 시작은 모션그래픽이었지만, 디지털아트 부전공, 디지털예술 연계전공하며 코딩에 눈을 떴다. 그렇게 나만의 물음표를 끈질기게 쫒아 결국 개발자 부트캠프 오게 되었다. 위코드를 다니며 항상 궁금했던 인터렉션 웹을 구현할 수 있게 되었고, 내 인생에 없을 것 같던 '개발'이라는 세상을, 이제 노트북 단 하나로 구현해볼 수 있겠다는 용기가 생겼다.

나의 2022년의 새로운 시작은

그렇게 부트캠프를 수료하고 나서는 남의 코드를 관찰하고 분석하는 능력은 생겼지만, 그래서 내가 짠 이 코드가 '어떤식으로' 동작하고 있기에 돌아갈 수 있는지 전혀 알 수 없었다. 위코드 수료생들과 함께 취업을 위한 스터디를 진행하고, 개발서적 및 강의로 온보딩 기간을 거치면서 컴퓨터의 동작원리에 더 집중해볼 수 있었다.

FE 개발자로써의 첫 취뽀 !

2022년 04월 04일, 나의 첫 입사일이 되었고, 난 사실 설렘 100을 안고 일찍 출근했었다.

22.04.04 사건

개발자로써 나의 첫 커리어이자, 첫 회사, FE 첫 입사자로써 현실은 내 마음과는 거리가 멀었다. 정말 거짓말을 하지 않고, 나에게 사수 분께서 나를 반겨주는 인삿말과 함께 첫 회의는 아주 인상깊었다. 그 이유는 내 이름 세글자를 제외하고는, 정말 아는 단어가 없었기 때문이다 정말.. 이때의 내 심정은, "취직했는데 1인분은 할 수 있을까? 1인분이 뭐냐, 0.2인분은 할 수 있을까? 아니 돈받아도 되나? 나 첫입사인데 한달뒤 짤리는거 아닌가?".... 오만가지의 생각이 다 든 하루였다. 이런 걱정으로 사실 2개월-3개월을 버티고 버텨냈다. (~~니가 선택한 회사, 악으로 깡으로 버텨라! 라고 매일 말해준 룸메에게 감사를.. 고마워친구~~)

그 당시에 사수분께서 말씀하셨던 단어들을 가만히 떠올려보면, '싱글톤', 'hashcode', '직교성', 'mixin', '이모티콘 코드', 'String 의 형태들', '용량을 줄이는 법' 등등등이 있었다. 이런 워딩들은 이제 갓 알에서 깨어나와 눈도 못뜬 병아리 개발자에게는 너무 무섭고 외계어같은 말들이었다. (지금 22. 12.31 현 시점에서는 위 용어들을 간단하게나마 다 설명해볼 수 있다.)

나의 개발 동료이자 현재 나와 가장 친한 친구에게 나의 04.04 사건에 대해 걱정을 표현했을 때, 그 친구는 '너가 첫 출근인데 1% 알아들은거라면, 하루하루 1%씩 채워봐, 그럼 100일 뒤에는 100%가 되어 있을꺼라고 생각한다면 어때?' 어쩌면 이런 해결방법같은 위로가 큰 위로가 되어주었고 아직도 이 말을 떠올리며 하루하루 1%씩 이뤄내고 있다.

차츰 눈이 뜨일 때쯤, 나는 방황에서 벗어나 해결책들을 찾기 시작했다.

내가 방황을 멈추고 방향을 찾기 시작한 때는, 입사후 2개월차인 6월쯤이었다. 하루하루 회사에서 개발하며 생각난 코드나 새로 배우게 된 점을 매일매일 한줄씩이든 노션에 기록해보기 시작했다. 새로 배운게 없었던 날이었더라도 그 날의 생각이나 회사생활을 하면서 느낀 점들을 하루하루 적어나가다 보니 그것이 일기장이 되었고 그것이 모여 공부책이 되었고 그것이 내 커리어들이 되었다.

Flutter, 첫 도전

나에게 flutter 는 첫 도전이었다. 배운거라곤, 아니 아는거라곤 js 도 아닌, React 가 조금이었는데..
난 입사하면서 총 4가지 변경점을 겪었다.

조금이라도 아는 언어였던 js 에서 dart 로 언어변경
React 로 함수형 프로그래밍을 하다가 객체지향 프로그래밍 으로 프로그래밍 방법 추가
web 만 하다가, app 으로 결과물 매체변경
사수분께서 백엔드 지식도 많으신 관계로 프론트엔드의 얕은 지식에서 백엔드의 키워드들까지

이렇게 많은 것들이 순간적으로 '업무'로 변경이 되다보니 처음에 이걸 어떻게 내가 다 해낼 수 있을까, 업무에 대한 부담도 되면서 나에 대해 걱정이 되었었다.

처음에 입사를 할 때엔, Flutter 라는 기술스택을 제대로 알지 못했다. 입사전 사수분께 따로 연락드려봤었지만 걱정하지 말고, 충분히 쉬다 오라고 하셨기에 고분고분하게 말을 들었다. (~~이때, 이 말을 신뢰하지 않고 공부를 해갔어야했다.,,~~)

내가 깨우치고 이뤄낸 것들

4월
막연히 일을 잘하는 사람이 되고 싶었다. 그러기엔 내 실력이 너무 부족했다. 처음엔 인정하기 보다는 이겨내려고 노력했었다. 하지만 점차 이기적이고 급한 마음을 버리고, '처음해보는거니까' 나의 힘으로 해보다가, 너무 시간이 많이 든다고 생각되면 그때, '--어디까지는 해봤고, 이렇게 해보니 이부분이 문제였다. 원인은 --같은데, 그 이후에 어떤 방법으로 풀어나가야할지 어려움이 있다.' 라는 의사소통을 통해서 나의 코드적 문제를 같이 공유하자는 생각으로 바뀌게 되었다. 고집스럽게 내가 혼자서 코드를 짜다 끙끙 앓다보면, 그것또한 회사의 손해가 아닌가. 고민해보다 정말 답답할 때, 문제를 공유해보자는 생각으로 바뀌게 되었다. 이전 직무가 디자이너였어서 그런지 생각보다 완벽주의 성향이 있었는데 개발자라는 직무에선, 코드짜는 일이 막히면 결국 마감기한을 늦추거나 한도끝도 없이 완벽을 추구할 수 있기 때문에 좋은 경우가 아니라고 판단했기 때문이다. 또한 멀티작업이 가능했던 디자이너할 때와는 다르게 개발자는 한 기능을 짜기 위해 설계를 하고 이 기능을 테스트해야했기 때문에 업무의 집중도가 높아야했다.

5월
우리회사 서비스 안내 랜딩페이지(web)를 작성했었다. 이때, naver SEO 정책을 통과하기 위해서 무척이나 애를 먹었던 달로 기억이 된다. 또한, 우리 app 에서 활용할 (다들 흔히 쓰는 아키텍쳐 패턴) MVVM 에 대해 공부하고 같은 동료 개발자분들에게 개발 자료로 공유해드리기도 했었다. 앞으로 http 통신을 하기 위해, User-Agent 를 공부하고, 자료를 만들어 동료분들께 공유하며 컨펌을 받았다. 공부한 내용을 바탕으로 User-Agent를 디바이스 정보에서 꺼내와 추출해 놓은 것을 서버에 던져줄 수 있도록 개발했었다. 마지막으로 사내 서비스(출시되기 전)에 국제화 프로세스를 도입(flutter l10n을 활용)하고, codegen 으로 로직과 리소스 분리하였다. 이로 인해 우리는 앱 내부에서 사용되는 문자열들을 공통적으로 추출하여 활용할 수 있었고 만약 서비스가 국제화가 도입되어야 할 시점에 언어만 도입해주면 자연스럽게 타언어로 변경되는데 유리해질 것이다. (많이 지원해주시고 가르쳐주신 사수님께 감사를 드립니다.) 논외로 이 달은 몹시 다양한 개념들로 인해 혼란스러웠기 때문에 '사내 Knock 문화'를 제안했고 반영되기도 했다. (11월부터 바빠지면서 점차 사라지긴 했지만 나는 꽤나 유용하게 활용했다.)

6월
입사후 온보딩 기간이 끝나고, 본격적으로 업무에 돌입했다. 우리의 첫 기획은 Chatting 하는 듯한 질문을 바탕으로 사용자들에게 어떤 답변을 받아내고 그 답변을 조합하여 결과물들을 보여주는 방식이었다. (물론 8월쯤 기획은 무산되었지만..ㅜ) 난 이때, Flutter 의 CustomPainter 를 처음으로 활용해보면서 엄청난 흥미를 느꼈다. Flutter는 사실 element tree를 렌더링하지 않고 canvas 태그를 빌려 렌더링을 하기 때문에 드로우를 하는 과정이나 결과물이 놀랍게도 훌륭하기 때문이었다. (아래와 같이 짰던 CustomPainter 활용한 코드뭉치)

class BubblePainter extends CustomPainter {
  BubblePainter({
    required ScrollableState scrollable,
    required BuildContext bubbleContext,
    required List<Color> colors,
  })  : _scrollable = scrollable,
        _bubbleContext = bubbleContext,
        _colors = colors,
        super(repaint: scrollable.position);

  final ScrollableState _scrollable;
  final BuildContext _bubbleContext;
  final List<Color> _colors;

  @override
  void paint(Canvas canvas, Size size) {
    final scrollableBox = _scrollable.context.findRenderObject() as RenderBox;
    final scrollableRect = Offset.zero & scrollableBox.size;
    final bubbleBox = _bubbleContext.findRenderObject() as RenderBox;

    final origin =
        bubbleBox.localToGlobal(Offset.zero, ancestor: scrollableBox);

    final paint = Paint()
      ..shader = ui.Gradient.linear(
        scrollableRect.topCenter,
        scrollableRect.bottomCenter,
        _colors,
        [0.0, 1.0],
        TileMode.clamp,
        Matrix4.translationValues(-origin.dx, -origin.dy, 0.0).storage,
      );

    canvas.drawRect(Offset.zero & size, paint);
  }

  @override
  bool shouldRepaint(BubblePainter oldDelegate) {
    return oldDelegate._scrollable != _scrollable ||
        oldDelegate._bubbleContext != _bubbleContext ||
        oldDelegate._colors != _colors;
  }
}

이후엔, Mock을 적극 활용한 테스트 코드 작성할 수 있었다. TDD 를 처음 하게 되었을 때, 나한텐 너무너무 어려운 점이 많았다. 생각의 흐름을 top-down 으로 바라보는 연습을 해야했기 때문이었다. 마지막으로 Flutter 를 활용했기 때문에 ios 및 Android 에서도 잘 동작하는지 매번 확인해야했다. 그래서 사내에서 유일한 나의 프론트엔드 '동기'(나라사랑 동기사랑 ㅇㅈ)분과 함께 각자 맡은 OS로 확인해보았다. 미리미리 확인하였고 문제가 생겼을 때 바로바로 해결했기때문에 출시때는 크게 문제가 없었던 것 같다.

7월
~~나 이때 코로나였지 뭐야, 다들 건강챙겨~~
우리 서비스는 MVVM 패턴에 멀티모듈을 도입한 상황이었는데, 이때 '선 긋기와 제한하기'를 제대로 체험 중이었다. dart 문법에서 그 당시, 지원해주지 않는 count 메소드를 우리 서비스의 utils 라이브러리에 직접 추가해보고 app 에 업데이트를 해보면서 절실하게 깨달을 수 있었다. 이유는 utils 는 글로벌하게 쓸 수 있게 끔 되어있었는데,

8월
JIRA 잘 쓰는법을 고민하고, 운영팀에 전파

9월
상품 개념 추상화

10월
Edge case 들을 많이 발견하고 수정한 제품에 적용
배너 작업에 Notion database 도입으로 백엔드의 개발 시간 감소에 기여

11월
다크모드와 노안모드 적용시 UI 틀어짐 문제 해결
되던게 안되던 로그인 문제 해결

12월
iOS 앱 스스로 빌드와 배포