테크 블로그 TechBlog

회사에서의 모습을 만들어봤어요. 손에는 아이스티!

소개 👩‍💻

안녕하세요~ 저는 GS SHOP 개발팀에서 Flutter를 통해 앱 개발을 하고 있는 연수연 매니저입니다.
올해 2월에 인턴으로 입사 후 신입사원이 된 지는 7개월이 조금 안된 따끈따끈한 주니어 개발자입니다. 🐥
GS SHOP 개발팀 소속에서 Flutter를 이용해 GS SHOP 애플리케이션을 운영 유지 보수 및 신규 개발을 진행하고 있습니다.
저는 2개월의 인턴 과정을 거친 후, 신입 개발자로 일하고 있는데요! 인턴 및 신입 온보딩 과정을 거치며 느꼈던 점들에 대해 이리저리 적어보려합니다.

시작 전 .. 🗣️

저는 학교를 다니며 졸업작품 및 팀 프로젝트에서 안드로이드 앱 개발을 맡아 처음 앱 개발을 시작하게 되었습니다. 대학교 졸업 후 바로 입사를 하게 되었기 때문에 이전까지의 회사 경험이 없는 상태였습니다.
그래서 어쩌면 누군가에게는 당연하다고 생각할 수 있지만, 저는 새로운 경험이었고 많은 배움이 있었습니다.
지극히 주관적인 생각을 이리저리 적어보겠습니다 😊

인턴 과정 시작!

⭐ 온라인 인턴 입문 교육

먼저 온라인으로 인턴 입문 교육을 일주일 진행했습니다.
이 과정에서는 GS리테일 회사의 비전, 정도경영 교육 등 회사를 다니며 알아야할 정보를 들을 수 있습니다.
저는 회사를 다니는 것이 처음이다보니 나도 모르게 어떤 실수를 하게 되면 어떡하지? 라는 걱정도 많았는데, 이 교육에서 GS리테일 ‘회사’ 자체에 대해 알아야될 것을 자세히 교육받을 수 있던 점이 좋았습니다.
 

⭐ 진정한 인턴 시작!

2주차부터는 회사에 출근하며 본격적인 인턴 생활을 시작했는데요, 함께 일하게 될 팀원 모두와 간단한 티타임을 가지며 인사하는 시간을 가졌습니다.
 

⭐ Flutter 개발 과제

인턴 과정에서는 Flutter 개발 과제를 진행했습니다.
먼저 받은 노트북으로 개발 환경 세팅을 진행했습니다. 저는 이전까지 윈도우를 사용했던 터라 맥북에 익숙해지는 것이 정말 어려웠습니다.
다행히 저와 함께 입사한 팀 동기 매니저님이 맥북에 익숙하셔서 정말 많은 도움을 주셨습니다.

🕒 일정

1주차	개발 환경 세팅 및 TikTok 클론 코딩을 이용한 플러터 기초 이해
2주차	GS SHOP 카테고리 화면 개발
3주차	GS SHOP 카테고리 화면 개발
4주차	GS SHOP 로그인 화면 개발
5주차	GS SHOP 로그인 화면 개발
6주차	GS SHOP 마이쇼핑 화면 개발
7주차	GS SHOP 마이쇼핑 화면 개발
8주차	전환 면접

다음과 같은 일정으로 과제가 진행 되었는데요, 4주차부터는 제 동기 매니저님과 다른 과제를 진행했습니다.
간략하게 제가 수행한 과제에 대해 적어보도록 하겠습니다.
 
☑️ 1. 개발 환경 세팅 및 TikTok 클론 코딩을 이용한 플러터 기초 이해

Flutter 개발 과제를 진행하면서 이 과제에 대해 스스로 분석하고 해결하는 시간을 가졌습니다.
Flutter를 이용한 개발에 익숙해지기 위한 공부 방법에 대해 고민을 했는데요. 먼저 개발하는 화면을 직접 노트에 그려가며 큰 단위부터 작은 단위까지 위젯을 어떻게 구성하면 좋을 지에 대해 설계를 했습니다. 설계를 손으로 먼저 그려본 후, 코드를 작성하니 훨씬 수월하고 깔끔하게 코드를 작성할 수 있었습니다.
 
개인적으로 Flutter 개발을 처음 하게 된다면 직접 그려보면서 위젯 단위를 설계하는 방법이 도움이 많이 된다고 생각합니다.


☑️ 2. GS SHOP 카테고리 화면 개발

두번째로는 GS SHOP의 카테고리 화면을 분석하여 개발하는 활동을 했습니다.
카테고리 API를 분석해서 카테고리 영역별로 나누어 모델링합니다.
처음에는 영역별로 Future builder을 이용해 데이터를 로드했지만, 로딩일 때 플래그를 주고, 나눠 놓은 위젯에 따라 상태관리를 원활하게 하기 위해 provider을 도입했습니다.

 

그런데 카테고리의 경우 데이터가 자주 바뀌지 않는 특성이 있어서 다른 탭을 다녀왔을 때마다 데이터가 로딩되는 것은 비효율적이라고 생각이 들었습니다. 그래서 더 세부적인 상태값을 두기 위해 BLoC를 도입하게 됩니다! BLoC 상태에 따라 데이터가 로드 되었는 지 판단하고, 로드 되었으면 다른 탭에 다녀와도 다시 로딩되지 않도록 합니다. 대신 API를 거친지 60초 이상이 되었을 경우에는 다시 데이터를 로드하여 최신 상태를 유지할 수 있도록 구현합니다.

 

GS SHOP 카테고리 완성!

☑️ 3. GS SHOP 로그인 화면 개발

다음은 GS SHOP 로그인 화면 개발입니다. 사용자가 로그인 버튼을 누르면 로그인 Post 이벤트가 발생되어 사용자가 입력한 값을 토대로 필요한 정보를 담아 Post 요청을 보냅니다. 여기서 로그인이 성공하면 LoginSuccess 상태로 전환되는데 Dio 인터셉터에서 로그인 response의 헤더에서 쿠키를 가져와 SharedPreference에서 세팅해줍니다.

 

 

이후에 마이쇼핑 탭을 갔을 때, 로그인 패치 이벤트가 실행되어 위에서 확인한 login-success 변수를 확인해 로그인이 되어있을 경우 LoginSuccess로 상태를 변경해주어 로그인 성공 시 마이쇼핑 페이지로, 로그인이 되어있지 않을 경우에는 로그인 페이지로 이동하도록 해줍니다.

 

 

GS SHOP 로그인 완성!

 
☑️ 4. GS SHOP 마이쇼핑 화면 개발

고민의 흔적 .. 🧐

다음 과제로는 현재 웹뷰로 되어있는 마이쇼핑 화면을 네이티브로 개발했습니다. 처음 개발했을 당시에는 데이터 로딩 시간동안 영역별로 스켈레톤 처리를 했습니다. 여기서 데이터가 로딩되는 시간을 사용자가 최대한 적게 느끼도록 할 방법을 고민했는데요.

먼저 해당 페이지에 있는 화면 구성을 한 후, "사이즈&피부 타입 관리"와 같이 고정되어 있는 값에 대해 노출을 하도록 합니다.
그리고 로그인 시 알 수 있는 고객명과 등급같은 정보를 이용해 빠르게 데이터를 노출시켜줄 수 있도록 합니다.
API에서 내려오는 데이터인 자산 정보는 기본값을 0으로 해둔 후, 데이터가 들어오면 해당 부분만 숫자 애니메이션 효과를 이용해 불러오도록 합니다.
이렇게 화면을 구성하게 되면, 기존 방식보다 전체적인 화면 구성이 빠르게 보이는 효과를 줄 수 있습니다.
해당 과제에서 요구사항 외에 더 개선점을 찾아서 능동적으로 작업하려고 고민을 많이 했던 기억이 있습니다. 😂

기존 웹뷰와 스켈레톤을 적용한 중간과정, 그리고 최종을 비교한 동영상이에요.

 

⭐ 코드 리뷰

개발한 과제에 대하여 팀의 개발 직무 매니저님들과 함께 코드 리뷰를 진행하게 됩니다. 처음 코드 리뷰를 하게 되면서 긴장이 많이 되었는데요. 코드 리뷰를 준비하며 내가 어떻게 해서 이런 코드를 짜게 되었는 지, 왜 이것을 사용 했는 지, 단순히 인터넷에서 이렇게 하라던데요? 가 아닌 정당한 이유를 생각하고 고민할 수 있었습니다.
 
코드 리뷰를 진행하면서 함께 의견을 나누게 됩니다. 제가 몰랐던 기술에 대해 말씀해주시면서 “이런 방법도 있어서 나중에 적용해 봐도 좋을 것 같아요”, “~으로 했던데 ~해서 좋은 것 같아요” 등의 말씀을 해주셨는데요. 이 때 제가 모르던 개념들과 기술들을 적어놨다가 나중에 따로 공부해볼 수 있어서 좋았습니다.
한 번 쓰고 끝나는 코드가 아니라 언제든 유지보수할 수 있는 코드를 작성하려고 했고, 공통적으로 사용하는 것들은 함수로 분리하는 등 개발 습관을 들이도록 할 수 있었습니다.
 
코드 리뷰를 통해 제가 알고있는 한정된 지식 외의 개발자분들의 넓은 기술과 지식들에 대한 이야기를 들을 수 있어서 생각하는 폭이 넓어진 것 같습니다.
 
특히 리뷰를 하면서
💡 “우리는 이렇게 쓰고 있는데, 이걸 우리 앱의 이 부분에서 이렇게 적용할 수 있지 않을까? ”
 
라는 말이 인상 깊었습니다. 기존에 사용하던 방법만 사용하지 않고, 열린 마음으로 애플리케이션을 개발하는 좋은 문화라는 생각이 들었습니다.
 

인턴 이후에도 .. 💻

인턴 이후 가장 달라진 점은 제가 개발하는 애플리케이션이 실제 고객님이 사용하도록 업데이트 된다는 것입니다.
그렇기 때문에 단순히 기능을 동작하기 위한 개발만 해서는 안됩니다. 앱 배포까지의 과정을 간략하게 적어보겠습니다.
 

⭐ 무엇을 개발 할거야?

현재 Jira와 Confluence를 사용하고 있습니다.
작성된 그릿을 통해 분석 및 협의를 거쳐 개발을 진행합니다.
개발 중에 진행된 내용에 대해 사실에 근거하여 문서화합니다. 이 기록으로 나 자신뿐만 아니라 추후 이슈가 생겼을 때도 기록을 통해 조금 더 원활한 해결을 할 수 있으니 놓치지 않도록 합니다.
 

⭐ 개발 고고! 그런데 나만 개발하는 건 아니잖아?

여러 명의 개발자들이 각자의 업무를 진행합니다. 그렇지만 사용자에게 업데이트 되는 애플리케이션은 하나입니다. 따라서 Git Flow를 통해 개발을 진행합니다. 각자의 feature 브랜치를 따서 개발을 진행한 후, develop 브랜치에 머지를 한 후 테스트를 진행하게 됩니다. release 이후에 이슈가 생겼다면 hotfix를 이용해 대처하도록 합니다.
 

⭐ 개발 할 때 놓치지 말자

개발 시에 네트워크 예외 처리 등의 정상적이지 않은 케이스에 대한 내용도 빠지지 않고 잘 생각해야 합니다. Flutter을 이용해 안드로이드 및 iOS 모두 개발하기 때문에 스스로 안드로이드 및 iOS 모두에서 테스트 해보며 놓치지 않도록 합시다..!
 

⭐ 사용자 곁으로!

회귀 테스트까지 완료된 후, 검수를 위한 과정을 거치게 됩니다. 안드로이드 및 iOS에 대하여 빌드 업로드를 진행합니다.
검수가 완료된 후 최종적으로 서버 확인 후 게시를 진행하여 사용자가 업데이트를 받을 수 있도록 점진적으로 출시를 진행합니다.
 

마무리

인턴 기간 및 신입 사원 온보딩을 거친 후, 회사 업무 프로세스뿐만 아니라 개인의 전문성을 높이기 위한 공부 방법과 태도, 개발을 대하는 자세 등을 함께 배웠다고 생각합니다.
또한, 관심있는 개발 기술들에 대해 함께 이야기 하고 의견을 공유할 수 있다는 것은 정말 큰 장점이라고 생각합니다.
아직 부족한게 많은 개발자이기 때문에 배우고 싶은 것도 많고, 배워야 할 것도 많습니다. 온보딩에서 배운 모든 경험을 토대로 새로운 기술을 접하고, 더 좋은 애플리케이션을 개발하기 위해 꾸준히 공부할 예정입니다.
글 읽어주셔서 감사합니다! 😊

 
 

---

연수연 | 디지털서비스본부 > 홈쇼핑서비스부문 > 홈쇼핑모바일센터 > GSSHOP개발팀
앱 개발에 관심이 많습니다. 그 외에도 IT 분야의 새로운 지식과 기술을 알아가고 적용하는 것을 좋아하는 개발자입니다.

---