240602_MIL | 사이드 프로젝트(2) 종료(1차..)

240602_MIL

이번주 한 일

• 사이드 프로젝트 끝났다 + 발표행사 다녀왔다.

지난달의 정리

1. 2번째 사이드 프로젝트 끝났다!

• 4~5월동안 사이드프로젝트를 진행했다. 스위그라는 회사에서 진행하는 단기 프로젝트로, 해당 회사에서는 팀 빌딩 및 스케줄 관리를 도와준다. (물론 일정의 금액을 내야했지만..)
• 어느 순간부터 인스타에 홍보 스토리가 자꾸 올라와서 고민하다가 기획부터 개발까지 모든 직무를 가진 사람들끼리 모여서 작업할 수 있는 일이 잘 없을 거라고 생각했다. 6주동안 기획 ~ 배포까지 이루어져야 했기 때문에 시간적인 부담감때문에 많이 스트레스 받았던 것 같다.(기간 안에 완료 못하면 페이백을 못받는다 :( 마이 머니,,,,)
• 물론 기간 안에 배포를 완료했지만, 기획의 방향이 생각보다 내가 생각했던 내용과 많이 다른 방향으로 진행되어 당황스러웠다.. 어쨌든 시작한거고 다수의 의견으로 인해 어쩔 수 없다는 생각이 들어 그냥 할 수 있는 범위 내에서 최선을 다하는 방향으로 마음 먹고 진행했다.

• 추후 디벨롭 및 기능 추가를 진행할 예정이다. 다음주에도 회의를 통해 진행을 계속할지, 혹은 추가 기능에 대한 논의를 하기로 했는데, 그 떄 되어야 확실하게 정리가 가능하겠지만 프론트끼리는 기능 추가 및 리팩토링하기로 논의가 완료되었기 떄문에 이번 달까지는 작업을 지속할 것 같다.
• 그리고 현재까지 배포된 링크 : 럭키데이
• 아직 반응형이나, 기능적으로 부족함이 많다. 계속 디벨롭 해야할 것 같다.(리팩토링+반응형 어느정도 진행 후에 이미지 및 페이지별 기능 추가 예정)

2. 협업 과정

• 주로 슬랙과 디스코드를 통해 소통했고, 기획자, 디자이너, 프론트는 피그마로 소통을 좀 많이 했다.
• 기획 논의로 인해 3주차까지는 주 2회로 수, 토 회의를 진행했고, 그 이후에는 주 1회 토요일 회의로 진행했다. 추가로 목요일 스위그 전체 회의까지..
• 기획에도 의견을 많이 내기는 했으나, 팀원들이 모두 아기자기한 UI를 마음에 들어하셔서 의견이 받아들여지지 않아 속상했다. 이후에는 UI적인 의견보단 기능적인 면에서 의견을 좀 더 냈던 것 같다.
• 백엔드 분들과의 협업 과정에서는 주로 swagger, 구글 문서를 통해 진행했다.
  • 익숙치 않은 방법이기도 했고, 사용하는 부분에 대한 정의가 부족해서 해당 부분에 대한 문의+논의하느라 시간이 많이 들었다. 초반에 논의가 되어야했던 사항같기는 하지만, 이미 관련 로직을 다 짜서 수정이 어려울 것 같다고 말씀주셔서 그냥 프론트 쪽에서 맞춰서 진행했다.
• 이번에 많이 느꼈던 건, 초반에 기획이 정해질 때 애초부터 정확한 의사 전달을 했다면 좀 더 즐겁게 프로젝트를 진행할 수 있지 않았을까 생각이 든다. 처음이고 초면이다보니 조금 조심스러워서 의견내는 걸 주저했는데, 초반에 방향을 잡을 때 의견을 냄에 있어 조심스럽다보니, 어느 순간부터는 내 의지와는 다르게 기획이 진행되었던 것 같다. 조금 아쉽..

3. 트러블이 생각보다 많았다..

• 문제는 크게 3가지 정도 있었다고 생각하는데, 1번째는 svg 이슈, 2번째는 api 명세에 대한 의사소통의 부재, 3번째는 반응형 이슈였다.

1. svg 이슈
   • UI가 모든 페이지에 이미지 위에 text가 얹어지는 스크린이었는데, 그렇다보니, 많은 이미지로 인한 렌더링 이슈가 있었다.
   • svg로 처리하려고 여러 방면으로 찾아보았으나, 디자이너님이 전달해주신 이미지를 svg로 변환하여 다운받게 되면 정상적으로 스크린에 나타나지 않는 문제가 있었고 처음부터 svg 이미지로 받는다하더라도 컬러가 변경되지 않는 이슈가 발생했다.
   • 해당 문제때문에 꽤 오래 지체되었고, 포토샵으로 직접 확인해보니 이미지에 fx로 그림자를 주거나 한 부분들이 정상적으로 출력되지 않는 점을 확인했고, 컬러가 들어갔을 때도 정상적으로 출력되지 않는 부분을 확인했다. 아마 직접 손그림으로 그리다보니 생긴 이슈이지않을까 하고 혼자 생각하고 있다.
   • 그래서 찾아낸 방법은 이미지를 블랙으로 처리하여 그림자는 프론트에서 처리하는 방법을 제시했고, 그나마 현재 나와있는 UI대로 처리할 수 있는 방법은 해당 방법밖에 없다고 판단하여, 컴포넌트를 만들어 위와 같이 처리했다.(물론 리팩토링이 더 필요하다..)
2. api 명세에 대한 의사소통의 부재
   • 2번에서 언급했던 것처럼 구글문서와 swagger에 작성되어있는 사항들이 상이한 경우가 부분적으로 있었고 정리가 한군데에 되어있지 않아서 프론트 입장에서는 swagger와 구글문서, 노션에 작업 여부 시트까지 3가지를 다 확인해야했다.(수정 요청을 드렸으나 번거롭다는 이유로 거절당함)
   • 특히 카카오 로그인 관련 이슈가 제일 문제였다(물론 의사소통의 부재가 원인이었음)
     1. 일반적으로 하는 방식은 아래와 같았는데,
        1. 프론트에서 로그인 시
        2. 인가코드를 받아옴
        3. 콜백 api를 통해 인가코드 백에 전달
        4. 백에서 토큰을 던져줌
     2. 이번의 백엔드 코드는
        1. 프론트에서 카카오톡 로그인 시
        2. 인가코드 + 토큰 관련 로직은 서버에서 설정(1번의 2+3)
        3. 백에서 토큰을 던져줌
   • 이번에 처리한 방식은 위와 같이 프론트에서는 카카오 로그인만 하면 서버에서 알아서 로직 처리를 해서 토큰만 던져주는 방식이었다. 하지만 구글링했을 땐 1번의 방식만 나와서 2번의 방식에 대해서는 이해가 부족했고 해당 부분은 백엔드분도 확실히 설명해주지 않아 구현하는데 오랜 시간이 걸렸다. 원래 팀원분이 진행하기로 했던 api 연동이나 시간이 조금 지체되어 함께 원인을 찾았고 결과적으로는 의사소통의 부재로 발생한 이슈였다는 것을 확인했다.
   • 주위 아는 지인에게 확인해보니, 2번이 보안 면에서 훨씬 좋은 방식이라고 하니, 알아두면 좋을 것 같다.
3. 반응형
   • 웹이랑 안드로이드는 별 문제가 없었으나 ios에서 오류가 발생했다. vh나 svh 설정도 해봤으나.. 반복적으로 하단의 도구모음때문에 이슈가 발생하는 것 같은데.. 내가 볼 땐 레이아웃 자체를 엎어야할 것 같다.
   • 시도해본 리스트
     • vh -> svh 설정 (실패)
     • window.innerHeight*0.01 설정 (실패)
       • 관련 링크
   • 배포 상태의 ios에서만 발생하는 이슈들이라 반복적으로 배포해서 확인해야했는데, 스위그 내의 배포 프로세스를 따라 진행해야하는 부분이었고 스위그 내의 배포 프로세스는 배포 승인까지 짧으면 2시간 길면 하루정도 걸렸기때문에 즉각적인 확인이 불가능했다. 그래서 이슈가 발생하는 페이지 + 레이아웃은 개인 레포에서 버셀 배포를 통해 반복적으로 확인했다. 아마 정확한 원인 파악 전까지는 그렇게 해야할 것 같다.. 어려워잉..

4. 남은 숙제

• 현재 계획 중인 사항들(꽝꽝 멀었다.)
  • pwa 설정
    • 웹에서 앱처럼 푸시 알림을 받을 수 있는 설정이라고 하는데, 주 기능 중 하나가 알림이 오는 처리인데 현재는 시간적인 이슈로 이메일로 알림을 받도록 설정하고 있어 앱에서처럼 알림이 올 수 있도록 처리하려고 하고 있다. 자료는 찾아보고 있는 중인데 점차적으로 반영할 예정
  • 리팩토링…..
    • 엉망진창의 코드들로 리팩토링할게 무척 많다. 일단 최우선 목표는 useEffect 다 쳐내기.. 로직도 좀 분리하고..
  • 이 외적으로도 다음주 회의를 통해 추가 기능 확인 후에 처리해야할 것 같다.

---

얼마만의 게시물인지.. 작년 말일에 올렸던 게시물 이후로 반 년만에 첫 게시물이다. 올해 초에 이사한다는 핑계로 공부를 좀 많이 멀리했던 것 같다. 한심하군.. :( 그렇다보니 뭔가 전환점이 필요하다는 생각이 들었고, 어느 순간부터 인스타에 자주 뜨던 팀빌딩을 통해 이번 프로젝트를 시작했다. 진짜 평일 주말 없이 늦은 시간까지 작업했고 덕분에 한달동안 불면증까지 생겨서 고생했다. 프로젝트 기간동안에는 주말에 집밖을 못나갔던 것 같다. 내 체력이 정말 엉망이구나 하는 생각도 덤. 같이했던 프론트 분이 늦은 시간까지 고생을 정말 많이하셔서 감사했다. 초반에 기획을 빨리 잡고 공용 컴포넌트들도 먼저 생각해서 작업했으면 더 좋지 않았을까 하는 생각도 들었다. 중후반에 너무 시간 제약에 휩쓸려서 엉망진창 코드를 짠 것 같아서 너무 아쉬웠고 내가 좀 더 코드를 잘 짰다면 팀원에게 도움이 되지 않았을까 하는 생각이 많이 들었다. 그리고 어제 스위그 4기에 참여한 모든 팀들이 모여서 발표하는 자리가 있어 참석했었는데, 다른 팀을 보는데 생각보다 퀄리티가 너무 높아서 놀랐다. 내가 너무 안이하게 생각했구나 하는 생각은 덤.. 그래도 할 수 있는 범위내에서 끝까지 해보고 싶어서 아무리 못해도 pwa까지는 꼭 적용하고 마무리하고 싶다. 다시 한 번 화이팅..