[퍼스트 프로젝트] 떨리고 설렜던 주니어 프론트엔드 개발자의 첫번째 프로젝트 회고

2020.12.21 ~ 2021.01.02 (2주 프로젝트)

 

코드스테이츠에서는 프로젝트 시작 직전 HA 테스트를 본다.

그 바로 전날에는 인증 스프린트가 진행되었는데 이때 기분은 마치 찬물을 한바가지 맞은 느낌이었다.

뭐? 쿠키? 세션? 토큰? 근데 ? 오어스도? 

휘몰아치는 인증을 겨우 끝내고 나니 HA가 있었다.

HA도 꽤나 오랜 시간 붙잡고 있었기에 심적으로 지친 상태였는데 다행히도 프로젝트를 진행할 수 있게 되었다.

 

프로젝트를 진행하기 전에 조금 떨리는 상태였는데..

그때는 인증이 어렵다고 느껴져서인지 서버에 대한 자신감이 떨어져 있던 상태였다.

프론트엔드 백엔드 둘 다 두번의 프로젝트 기간동안 한 번씩 해보고 싶었기때문에 첫 프로젝트에서는 프론트엔드를 맡았다.

 

그렇게 역할을 정하고 아이디어 회의를 하면서 오랫동안 생각해왔던 아이디어를 하나 제시했다.

 

'기온 별 옷차림' 

이 키워드를 보면 어떤 게 생각 나는가?

 

키워드가 익숙한 사람도 있을 것이다. 

커뮤니티를 하다 보면 한 번쯤은 봤을 법한 짤을 가져왔다.

 

기온 별 옷차림

 

평소 계절 감각이 워낙 없다고 생각했는데, 우연히 2년 전에 본 이 짤 덕분에 매일 매일 출근할때마다 오늘의 기온을 검색하고, 네이버에 기온별 옷차림을 검색한 다음 이미지를 찾아서 그에 맞게 옷을 입은 다음 외출하곤 했다.

 

아니 왜 굳이 맨날 검색하지? 이미지를 저장해놓으면 되지 않나? 라고 생각할 수 있는데

 

워낙에 사진이 많아 저장하면 묻혀서.. 사진 찾는 게 검색 보다 오래 걸려서 나름의 효율을 따진 방안이었다.

 

그래서 차라리 사이트만 들어가면 알아서 접속위치 확인해서 기온도 찾아주고 그 기온에 맞게 옷차림도 알려주면 얼마나 좋을까 생각했었다.

이를 아이디어 회의에서 어필했고 결과는? 땅땅땅!!! 아이디어로 선택되었습니다!!

반응형

아이디어 선정이 끝난 후 SR 단계 (기획)에 들어갔는데 처음엔 좀 난관이 있었다.

협업 툴 사용이 익숙하지 않았고, 기능플로우는 그래서 대체 어떻게 만드는 건데? 라는 생각이..

 

근데 또 사람이 웃긴 게 그냥 무작정 하다 보면 또 잘 된다.

그렇게 유야무야 휘몰아치듯 4일이 지나고 코딩을 시작했는데.. 

같이 프론트엔드를 진행하는 팀장님이 목업만 구현되어있는 디자인 대신 실제로 구현할 디자인 자체를 figma 툴을 사용해 제작하는 게 어떠냐고 했다.

 

처음에 디자인 한 게 촌스러운 것 같아서 혼자 10번은 넘게 갈아 엎었던 것 같다. 

메인 이외에도 마이페이지, 로그인, 로그아웃, 회원탈퇴, 회원가입 페이지가 있었는데, 사이트가 주된 컨셉이라는 게 있지 않나.

맘에 안들어서 메인을 수정하면 이제 다른 페이지도 다같이 계속 수정에 들어가게되는 뫼비우스가 반복되었다.

그렇게 전체 디자인을 모두다 기획하고 구상을 하면서 크리스마스를 보내고..첫주를 끝냈다. 

 

둘쨋주는 사실 프로젝트 마지막 주였다. 

이제 기획 다 끝났는데 2주 중에 반밖에 안남았다고?? 다 끝낼 수 있을까 생각이 들었는데 역시.. 하면 된다.

 

서버 레포를 받아 클라이언트와 충돌하는 지 확인하고, 에러를 확인하고 마지막까지 디자인을 갈아 엎고, 폰트도 이것저것 다 써보고

그렇게 최종 사이트가 만들어졌다.

 

 

 

우선, geolocation API로 접속자의 위치 정보를 확인하고, 위도와 경도로 데이터를 받는다.

받은 데이터를 기준으로 openWeather API를 사용하여, 현재 시간을 포함한 9시간의 데이터를 시간 단위로 필터링하여 받는다.

openWeather API 응답 데이터에는 api에서 기본적으로 제공하는 이미지 url도 포함되어있어 날씨 아이콘을 받아왔다.

 

현재 시간을 기준으로 상단과 메인 중하단 옷차림이 렌더링된다.

그리고, 스크롤을해서 상단 날씨 박스에서 특정 시간대를 클릭하게 되면? 해당 기온을 기준으로 다시 한 번 옷차림 데이터를 불러온다.

 

근데 여기서 유저의 입장을 다시 한 번 생각해본다면, 당장 내가 접속한 지역이 아닌 다른 지역에 대한 옷차림을 추천 받고 싶을 수 있다.

그럴 땐 동네 검색 버튼 내에서 지역을 선택할 수 있다.

 

 

 

모달 창 내 지도는 카카오 맵 API를 사용하여 지도를 띄우고 검색이나 클릭으로 위치 정보를 받아 올 수 있도록 구현했다.

 

그리고, 회원가입, 로그인, 마이페이지 등을 이용할 수 있는데

비로그인 유저와의 차이점은..로그인을 했을 때 날씨 바에 체감온도가 추가되는 서비스가 있는데 이는 로그인하지 않은 유저도 필요한 서비스를 이용할 수 있도록 우선적인 제공을 했다.

 

프로젝트가 마무리 되고 나서 대표로 발표를 진행했다. 너무나 시간이 촉박했기 때문에 ppt발표와 홈페이지 시연을 원테이크로 7분안에 찍었어야 했는데 제출 마감 시간 1분을 남기고 제출했다.

그리고 발표 영상 보여줄때 침대로 도망가서 잠시 숨어있었던...

 

사실 2주짜리 첫 프로젝트였는데 결과적으로 너무 만족스러운 결과물이었다. 

하지만 아쉬운 게 몇개 있는데.. 자체 가입 유저에 대해 아이디/비밀번호 찾기 기능이 없다.

 

마이페이지에서 유저 인증을 하고나서 성공적으로 비밀번호를 바꿨는데 비밀번호를 잊어먹어서 mysql을 켜서 유저 정보를 직접 확인한 기억이 있다. 

 

이는 코드스테이츠를 수료한 이후 리팩토링을 할 때 추가할 기능 중 하나이다.

내 아이디어와 디자인으로 진행된 프로젝트이다 보니 계속 맘이 가고... 기분 좋고... 여기저기 막 자랑하고 싶고... 

역시 내가 이거 만들고 싶었는데 결국 만들었네 싶어서 흐뭇하기도 하고... 

 

아직 많이 부족하지만 개발자로 한 걸음 더 발돋움 하는 것 같아 매우 기분이 좋다. 

 

일기를 쓰던 습관때문에 원체 글을 가볍게 의식의 흐름대로 쓰지 않았나 싶긴 하지만.. 여긴 개인 블로그이고 먼훗날 다시 보면 이것도 한 추억일 것 같아 주절주절 써 보았다.

 

다시 이 글을 보았을 땐 더욱 더 발전한 주니어 개발자가 되어있기를