3개월차의 꽃이라고 할 수 있는 기업협업을 드디어 마무리했습니다!!!! 🎉🎉🎉
처음 시작할때는 이걸 언제다 끝내냐~의 생각을 했지만 길다면 길고 짧다면 짧은 한달이 벌써 마무리 되었다는게 아직도 실감이나질 않는다. 그간 한달간 인턴생활을 하면서 느꼇던 느낌들을 글로 한번 녹여보려고 한다.. Let's start!!
⚡️인트로
처음 기업협업회사를 정하기전 우리에게는 13개의 회사가 후보로 지정이 되었다. 여기서 1지망 5개, 2,3 지망 3개를 선택해, 거기서 랜덤으로 선택되는 회사에 인터의 자격으로써 가기로 된다. 선택을 하기 위해 이 회사가 어떤회사인지, 어떤 서비스를 하는회사인지 등등을 면밀히 살펴보고, 5개의 회사를 지원하게 되었다. 그 중에서 저는 "후케어스코리아" 라는 50~60대를 타겟으로 하는 데이팅앱을 현재 서비스하고 있는 회사로 발령받게 되었다.
우리팀은 총 4명으로써, 프론트엔드 2명 백엔드 2명이 가기로 결정이되었다.
회사에 출근하는 첫날, 우리팀은 굉장히 설렘과 기대를 가지고, 어떤 일들이 주어질지, 그리고 어떤 브로커들이 있을지, 긴장을 하면서....
회사는 공유오피스에 있는 작은 회사였으며, 백엔드 한명과, 디자이너 한명이 있는 굉장히 작은 회사였다. 처음 선택을 하게되면서, 내가 가장 바랬던것은 내 코드를 리뷰해줄 사수가 있었으면 하는 바램이었지만, 운이 좋지 않게도, 나의 사수는 없었다. 실망은 하긴 했지만, 어쩔수 없는 거라 생각하기로 했다. 더군다나 나는 이 팀의 PM으로 선정이 되었기에, 이런 실망감을 가진 팀들을 다독여야 된다는 생각으로 긍정적인 영향을 줘야겠단 마음으로, 좋은게 좋은거라고 현재에 주어진것만 열심히하자고 했다.
⚡️프로젝트
기업협업을 가기전, 기업협업에서는 보통 어떤걸 하는가 찾아보았을때는, 대다수의 분들이 회사릐 관리자 페이지를 다시 만든다던제, 회사내규에서 사용할 수 있는것들은 많이 하는것을 찾아볼 수 있었다. 그러나 우리는 운이 좋게도(??) 회사에서 이벤트페이지(웹앱)를 만들예정인데, 이것을 한번 기획부터, 배포까지 해보라는 것이었다. 그래서 맨처음에는 굉장히 당황했고, 이것이 진짜 회사라는? 느낌이있었다.
1️⃣ 기획
회사에서 하고자하는 것은, 사용자들에게 게임을 통해, 실제 회사에서 서비스하고 있는 앱에서 사용할 수 있는 포인트를 얻을수 있게 하고자 하는 것이었다.
그 전 1,2차 프로젝트에서는 이미 서비스하고 있는 회사의 웹페이지를 참고해서, 그것을 토대로 하는 프로젝트를 했지만, 이번에는 진짜 무에서 유를 창조해야 되는 것이라. 어떤
이벤트를 만들것인지, 컨셉을 어떻게 할지, 어떤 게임을 만들지에대해 고민을 가져보는 시간이었다.
우리는 굉장히 많은 아이디어를 제안했다, 타겟층이 5~60대 이다보니, 부모님을 기준으로 평소에 어떤 게임을 재밌어하시고, 흥미있어하시는지, 그래서 결과적으로, 기억력을 요구하는 카드뒤집기게임, 옛날 그 시대의 물건을 보고 맞추는게임, 이상형월드컵 등등을 제안했지만, 결국 회사에서는 옛날 물건을 맞추는 게임을 하자는 승인을 받고, 거기에 맞춰 디자인 작업을 시작하기로 했다.
2️⃣ 디자인
디자인을 이제 피그마(figma)를 사용해, 옛날 6~70년에 컨셉에 맞추어, 옛날 시험지의 느낌으로 하기로 결정을했다. 맨처음 참고할만한 자료들을 조사중, 인텔에서 우리컨셉과 비슷한 이벤트페이지를 만든적이 있는데, 이것을 주로 참고 하기로 했다. 여기서 제일 큰 문제는 우리중 아무도 피그마를 사용해본 경혐이 없다는 것이었다. 하지만 이것도 기회라면 기회라고, 피그마를 한번 배워보기로했다!!
사용해보면서 느낀점은 피그마를 활용을 잘하면, 그다음 단계인 퍼블리싱을할때, 굉장히 퍼블리싱 시간이 단축될 수 있겠구나!! 라고 느꼇다. 왜냐하면, 피그마에서 작업을 하면, 내가 적용한 디자인의 width, height, color 등등의 값들이, 피그마에서 확인이 가능한 것이라, 왜 사람들이 프론트엔트가 피그마를 하면 좋다고 하는지 느낄 수 있는 시간이었다.
밑의 사진은 그 결과의 하나이다.
3️⃣ 퍼블리싱
이번 페이지를 만들면서, 먼저 제일 많이 배웠던것은, 웹앱을 할때, 굉장히 신중하게 생각하고 시작을 해야된다는 것이었다. 기존에 내가 퍼블리싱하던방식은, 웹, 즉, 컴퓨터를 기준으로 만들다보니, 따로, 핸드폰 사용자에 대한것은 딱히 신경쓰지 않고, 만들었었다. 하지만, 이번에는 웹앱, 앱! 사용자가 많기때문에, 그 핸드폰 화면에 맞춰서 화면을 만들기 시작해야하는 것이었다. 기존에는 px만을 사용해서 틀을 잡기 시작했다면, 이번에는, 기준이 되는 부모를 px로 사이즈를 정하고, 그 밑에 있는 자식요소의 div들을 em으로 사이즈를 줘서, 화면이 기준으로 정해놓은 px이하로 줄어들면 거기에 맞게 모든요소들이 줄어들도록 mediaquery를 이용해, 반응형으로 제작을 했다. 이 과정에서 반응형웹과, 새로운 개념인 em,rem,vw등등 반응형에 대해 배울수 있는 시간이었다.
4️⃣ 기능
기능관련 코드들은, 회사의 보안상의 이유로 올릴수가 없기 때문에, 글로 간략하게 설명을 하겠습니다.
우선 제일 아쉬운점은, 리덕스를 적용해보지 못했다는 점이다. 리덕스의 좋은점은, 당연히 state를 다른파일에서 상태관리, 즉, 컴포넌트별로 state를 관리하는 것이 아니라, 하나의 파일에서, 여러개의 컴포넌트에있는 state를 한꺼번에 관리할 수 있기 때문에, 일일리 props로 컴포넌트로 전달하지 않아도 된다는 장점이있다. 그래서 이번 기회에 한번써보고 싶었는데, 현재 내가 맞은 페이지에서는 크게, 필요가 없었다는 점과, 공부를 하고 제대로 써보고싶었지만, 시간적인 압박감으로 인해, 사용하지 못했다. 진짜 정말 아쉬웠다.
그렇지만, 이번기회에, 이런저런 라이브러리를 사용해 볼 수 있는 기회가 있었다. framer-motion을 이용한 애니메이션, 리액트 부트스트랩을 이용한 modal창 띄우기, snakebar를 이용한 modal창 띄우기 그리고 해보고 싶었던 progress바 만들기.
5️⃣ 통신
통신...... 통신은 항상 느끼는거지만, 소통의 중요성을 매번 느끼는 시간이다. 왜, 좋은 개발자란? 개발실력이 뛰어난자와, 소통능력이 뛰어난자 이 두 가지로 분류하는지를 새삼 다시 느낀다.
비록, 나의 비루한 개발실력이 부족해서 그런것도 있겠지만, 기본적인 의사소통 즉, 백엔드와의 키값맞추기부터, 정보 요청, 응답하기부터, 삐걱거리기 시작하면, 기능을 아무리 잘 했어도, 완성까지의 시간이 지체가 된다는 것을 많이 느낀다. 그리고 나의 백엔드적으로 지식이 많이 부족하다는 것도 알게되었고,,, 결국 공부만이 답이다!!
⚡️느낀점
기업협을 하면서, 줄곧 생각해온것은, 난 기업협업을 하면서, 어떤걸 여기서 배워가야되는지였다. 개발자로서의 코딩능력(개발능력)을 배워갈것인가? 아니면 개발자로서의 회사생활에 대해 배워갈 것인가? 솔직히 처음에는 실망도 많이했다. 내가 생각했던 환경이 아니었고, 내가 생각지도 못했던 것들도 해야했었고, 그로 인해, 조금 예민해지기도하고, 개발자란 이런 생활의 연속? 일 수도 있겠다는 생각을 했었다. 하지만 다행히, 나의 옆에는 내 팀이 있고, 나와 같이 열심히 해주고, 나의 멘탈을 챙겨준 팀원이 있어서 참 다행이랑 생각을 했다. 그로 인해, 좋은 결과로 이어질수있다라는 확신을 가지지 않았나 싶다. 그래서 오히려 더 피해를 주면 안된다는 생각으로, 늦게까지 남아서, 이거만하고가자라는 집착을 가지고 붙들고 있지 않았나 싶다.
