🌻 Intern Review
올해 초 2월 중순부터 5월 중순까지 일경험 프로그램을 통해 3달간 스타트업에서 인턴으로 근무했다.
그토록 꿈꾸던 실무 경험이었는데 짧지만 경험하고 배운 점이 많아
전체적인 업무 내용과, 배운 점, 잘한 점, 그리고 아쉬운 점까지 회고로 풀어보려 한다.
📍 Where
내가 근무한 기업은 '건강 및 피트니스' 도메인의 스타트업이다.
안정적인 사용자층을 확보한 어플리케이션을 운영하고 있고,
소상공인, 지자체와 함께 협력하며 지역사회 활성화에 기여하고 있는 점에 흥미가 있어 지원했다.
그리고 무엇보다 스타트업의 분위기와 커뮤니케이션을 경험해 보고 싶었다.
기업에서의 커뮤니케이션 방식
- 스탠드업 미팅 : 매일 아침 10시 반에 모두 일어나 한명 씩 돌아가면서 어제까지 한 일, 하고 있는 일의 진척상황, 오늘 할 일을 다같이 간단히 공유하는 시간을 가졌다. 15분 내로 끝났고 방향을 조정하는 등 간단한 소통도 함께 이뤄졌다. 인턴은 일주일에 한번 참여했는데, 처음엔 개발이사님부터 모든 직원분들에게 주목받는 게 긴장되었지만, 어떤 작업을 하고 계신지 알게 되었고 직책, 직무 상관없이 동일하게 진행하고 귀기울여 주는 방식에서 수평적인 스타트업의 분위기를 많이 느꼈다.
- 온라인 커뮤니케이션 : 자리가 가깝더라도 우선적으로 슬랙의 DM을 통해 커뮤니케이션이 이뤄졌고, 자세히 얘기할 사항은 구두로 얘기하면서 소통했다. 내 자리의 경우 사수님과 떨어져 있어서 DM으로 질문하는 일이 많았는데, 까다로운 질문의 경우에는 구두보다 소통하기에 좋았던 것 같다.
📍 나의 목표
- 질문 많이 하기
이거 하나였는데 굉장히 중요하게 여겼던 것 같다.
이전부터 느낀 나의 단점 중 하나는 '너무 혼자 해결하려고 하는 것'이다.
어떻게 보면 책임감이 크고 스스로 주어진 일을 잘 해내고 싶은 마음도 있지만 그런 마음 때문에 도움을 요청하는 것도, 질문하는 것도 막상 하려고 하면 어려웠다. 또 여기에 더해 이게 물어볼 만한 일일까 생각하면서 결국은 혼자 어찌저찌 해결했지만, 사실 그 과정이 비효율적이었던 것 같다.
그래서 입사 초기 "인턴인 나는 모르는 게 당연하다"고 생각하려고 노력했다.
그리고 질문도 잘 해야 한다고, 실무에서는 어떻게 물어봐야 하는지 고민이 많았다. 그래서 "많이 질문해 보면서 늘자"고 생각했고, 그 과정에서 더 많이 배울 수 있기를 기대했다.
🌻 Experience Overview
📍 사용 스택
- FE :
ReactTypeScriptEmotionRecoilReact-QueryReact-Hook-formMUIStorybook - 협업 툴 :
Git,JiraButbucketSlackNotionFigma,SwaggerPostman
📍 업무
✔️ (1개월 차) 소상공인 클라이언트 사이트 개발
첫 업무는 이전 인턴분이 프로젝트 환경을 구축하고 진행하던 작업을 이어받아 마무리한 프로젝트였다.
기획과 디자인은 이미 완료된 상태였고, 프론트엔드(나), 백엔드 개발자 한 분과 함께 프로젝트를 진행했다.
- 1달간 미작업 구현 사항을 구현하고 2차 QA까지 진행, 개발계->운영계 배포를 마쳤다. QA를 진행하면서 사실상 프로젝트 전반을 다뤘는데, 처음 코드를 보았을 때 이전 인턴분이 환경 구축은 탄탄하게 해주셨지만 급하게 최대한 만들다 가신 느낌이 드는 상태였다🥲. 기존 작업 내용은 요구사항에 맞게 로직을 고치고, 복잡한 코드 정리하고, 중복 컴포넌트 분리하고, 폴더 구조도 재정비 하면서 완성하더라도 혹시나 나중에 작업할(?) 누군가를 고려하며 가독성을 높이려 했다.
- 이후에는 모바일 반응형 디자인을 반영하고 발생한 버그와 오류를 해결하다, 퇴사 전 UI/UX 개선을 위한 디자인 변경 & 기능 추가 사항이 있어 이를 반영하고 추가 QA를 마침과 동시에 퇴사했다👼.
모르는 건 사수님의 도움을 받았지만, 실무에서 맡은 첫 프로젝트라 책임감이 컸고 나오는 QA 사항은 오로지 나의 것이라는..부담도 있었다.
그러나 그만큼 다양한 요구사항을 접하고, 다양한 에러 상황을 해결해 보고 스택들도 제대로 다뤄볼 수 있었기 때문에 가장 크게 성장한 경험이 아닐까 싶다.
✔️ (2개월 차) 데이터 포탈 UI 컴포넌트 구현 참여
사내 개발 중인 데이터 포탈에서 UI 컴포넌트 구현을 맡았다. 아래는 그 중 가장 기억에 남는 컴포넌트 구현 내용이다.
- 테이블 입력 폼
오디오/이미지/텍스트/날짜 입력 폼이 테이블 형식으로 짜인 컴포넌트를 구현했다. 폼 자체는 구현이 어렵지 않았지만, '테이블 레이아웃'에 맞춘 요구사항을 충족하기 위해 성능보다도 UI에 대한 고민을 많이 하며 개발한 경험이었다.- 텍스트 입력 폼은 클릭 시 입력 모달을 띄워 입력받기
- 오디오/이미지는 키보드 Delete/Backspace 키로도 삭제할 수 있어야 함
- 행을 10개 이상 입력 시 상하 스크롤 활성화
- 좌/우로 폼이 나뉜 상태에서 좌측 폼은 고정, 우측 폼은 shift키를 눌렀을 때에만 좌우 스크롤 기능 활성화
✔️ (3개월 차) Storybook 기반 디자인 시스템 구축
입사한 지 2달이 되어갈 때쯤 사수님이 'Storybook'을 사용해 본 적이 있는지 물어보시면서 내가 있을 때 이를 같이 도입해 보고 싶다고 했다.
사실 Storybook에 대해 잘 모르고 언제 한번 공부해 보고 싶다는 생각만 하다가 새로운 스택을 사용해 본다는 게 좋아서 호기롭게 "주말 동안 공부해 보고 올게요!" 로 시작된 업무였다.
사수님이랑 같이 일주일에 1-2번 스터디를 진행하고 3주 동안 아래 플로우로 구현했다.
- Storybook + 컴포넌트 라이브러리 프로젝트 환경 구축
- 작업 중인 UI 컴포넌트들을 바탕으로 문서화 진행 (그 외 타이포그래피, 컬러 팔레트 등등)
- Chromatic으로 Storybook 배포
- UI 컴포넌트들은 NPM 라이브러리로 따로 배포
- 빗버킷(Bitbucket) CI/CD 파이프라인 세팅으로 두 배포 자동화
🌻 느낀 점
🌱 배운 점
✔️ 문제 파악하기
- 기획팀으로부터 QA가 들어오면 "~에서 ~와 같이하면 ~동작이 안돼요"와 같은 보여지는 부분에 대한 피드백으로 받게 되는데, 이를 해석해서 코드 내의 어떤 로직에서 문제가 있는지 도출하기까지 파악할 수 있게 되었다.
- 백엔드 API 요청 중 500 에러 제외 에러가 날 경우 이게 백엔드 문제인지 프론트엔드 문제인지 바로 파악 후, 백엔드 에러의 경우 원인을 백엔드로 전달하면서 함께 해결할 수 있게 되었다.
✔️ 프론트엔드가 UX를 고려하는 방법
쉬운 예로 '999,999개까지의 개수를 입력할 수 있는 인풋'이 있다면 아래와 같은 요구사항이 있을 것이다.
- 6자리 입력 제한 또는 유효성 검사
- 0, 음수(-), 문자열, 특수기호, 소수점 입력 방지 / 혹은 에러 문구 표시
- 비어 있는 경우 에러 표시
- 띄어쓰기 금지
- 천 단위 구분기호(콤마) 넣기
"누가 음수를 입력하겠어? 누가 띄어쓰기를 입력하겠어? 아무리 그래도 999,999개+까지 입력하겠어?"와 같은 여지는 실무에서 허용되지 않으며, 무조건 언젠가 QA로 들어올 사항이고😇, 개발자가 구현 시 먼저 충분히 고려해야 함을 느꼈다.
실제로 180+개의 프론트엔드 QA를 처리하면서, 구현 전 기획 요구 사항을 꼼꼼히 확인 하에 설계 방법을 세우고, 이 컴포넌트를 마치 '미운 4살' 아이가 다룰 수도 있다고 생각하고 사용하는 클라이언트의 시선에서 개발하는 마인드를 지니게 되었다.
🌱 좋았던 점
✔️ 대안을 제시하다
3개월 차에 진행했다고 언급한 Storybook을 배포할 때 곤란한 문제가 있었다.
- Bitbucket 배포가 가능해야 함
- 다른 배포 플랫폼은 Bitbucket이 안되거나 비공개 레포지토리에 대한 제약 있음
- 배포 자동화도 필요함
사수님과 계속 고민하다가 여러 배포 플랫폼을 조사하던 중 Chromatic을 발견했다. Chromatic은 Storybook 관리자가 만든 무료 배포 서비스로 배포 과정이 간단하고, 시각적 테스트 자동화를 지원하면서도 팀과 함께 리뷰할 수 있다는 점이 좋아 보여 사수님에게 제안드렸는데 긍정적으로 여겨주셔서 Chromatic으로 배포를 진행했다. 자동화는 Bitbucket CI/CD 파이프라인 구축으로 처리하게 되었다.
문제 상황에서 열심히 대안을 찾아보고 제안한 것을 바탕으로 무사히 배포까지 이끌어낼 수 있어 뿌듯했다.
✔️ 좋은 질문하기
사수님으로부터 좋은 피드백을 받았던 부분이다.
사수님에게 도움 요청 시 기업 슬랙 채널을 통한 소통 + 내 자리와 사수님의 자리가 떨어져 있어 항상 DM으로 먼저 질문을 드리고 사수님이 확인 후 답변 혹은 내 자리에서 조언을 주시는 방식으로 도움을 구했다.
입사 초반에는 인턴으로서 사수님에게 드리는 DM이 긴장되어서 먼저 양해를 잘 구해야 되겠다(?)는 생각이 들었는데, 다른 직원분들 간의 커뮤니케이션 방식이 생각보다 편하고 자유로운 분위기였고, 다들 바쁘게 업무에 임하고 계신 걸 보면서 오히려 빠른 전달이 더 중요하다고 느꼈다.
- 그래서 질문이 간단한 경우 서론 없이 바로 DM으로 질문을 드렸고,
- 코드 리뷰처럼 설명이 필요한 경우 "현재 ㅇㅇ 관련 문제가 있는데 확인 괜찮으신가요?"와 같은 간단한 DM을 드린 후, '문제 상황 + 코드(파일 경로 포함) + 주요 코드 설명'을 글로 정리해 DM을 보냈다.
이 방식에 대해 사수님은 빨리 확인하고 파악해서 도움을 줄 수 있는 방식이 좋았다고 하셨다.
물론 어떤 커뮤니케이션 방식이 옳게 여겨지는 지는 사람, 회사에 따라 또 다를 수도 있겠지만 요지 파악을 위한 '정확한 전달'만큼은 커뮤니케이션에서 항상 중요하다고 생각하게 되었다.
🌱 아쉬운 점
✔️ 일정 예측 및 관리
전달받은 업무에 대해 "얼마나 걸릴 것 같아요?"라고 질문을 받으면 어떻게 구현할지 전혀 감이 잡히지 않아 머뭇거리거나 항상 넉넉잡아 말씀드리곤 했다.
오래 걸릴 수 있음을 드러내는 게 인턴으로서 좋아 보이지 않을 테지만, 내가 말한 기간에 대해 책임져야 한다고 생각했기 때문이다.
이에 사수님은 "나라면 이 작업은 며칠, 저 작업은 며칠 정도면 될 것 같은데" 요렇게 요구사항을 보며 바로 계획을 잡는 모습을 보고 놀랐다. 결과적으론 사수님과 함께 일정을 조율했고, 내가 처음 넉넉잡은 기간보다 빠르게 완성하기도 했다.
요구사항을 보고 머릿속으로 그려보면서 구현 방향을 예측할 수 있게 된다면 다른 이해관계자들과의 협업에도, 프로젝트 일정 관리와 진행에도 큰 도움이 될 것 같다는 생각이 들었다. 그러려면 더 성장해야지💪
✍️ 마무리
소통 능력과 스킬에 대한 빠른 적응력을 인정받고, 그동안 공부해오던 스택을 직접 사용해 본 값진 시간이었다.
많이 배운 만큼 부족한 부분도 느꼈고 앞으로 내가 무엇을 채워나가야 하는지 안다.
글을 쓰는 지금은 벌써 인턴 퇴사 두달차가 되어가지만
조급해하지 않고 단단한 개발자로 계속 나아가고 싶다.
