따란 🎉
내가 개발자를 하겠다고 마음먹은 후에 처음으로 다짐했던 프로젝트를 마무리지었다 !
물론 작업이 끝난지는 시간이 좀 지났지만 ㅎㅎ
필요에 의한 것을 만들 수 있는 개발자가 되겠다고 마음 먹은 이후로,
처음으로 실사용자에게 공개해본 프로젝트였기에 애정이 상당하다 :)
그 작업기를 대략적으로 정리해볼까 한다.
모바일뷰 중점으로 작업하다보니 링크를 올리기는 부끄러운 작업물이기에,,,
깃허브로 대체하기 😉
🌸 꽃길레터 🌸
은퇴를 하시는 아버지를 위해서 가족들과 지인들이
응원의 편지를 작성할 수 있는 모바일 뷰 페이지
1. 기획 방향
초안
첫 기획으로는(대략 1년전..), 팬 페이지처럼 만들어보고 싶었다.
연혁이라던지, 학창시절때부터의 사진들을 모아서 보여줄 수 있는 페이지를 기획했었다.
하지만 시간이 흐를수록 너무 포트폴리오를 위한 페이지를 만들고자 하는
내 욕심(?)만 투영되어가는 것 같아서,
기존의 기획방향을 생각하고, 확 갈아엎어버렸다 🫠
수정안
내가 이 프로젝트를 기획했던 건,
최대한 많은 가족들과 동료들, 지인들이
아빠의 은퇴를 마음을 담아 응원하고 축하하기 위함이었다.
그렇기 때문에 최대한 사용자가 사용하기 편리하고
제일 중요한건, 사용하기에 귀찮지 않을 정도의 사용성이었으면 했다.
계속해서 고민하던 와중, 작년 12월에 트리꾸미기라는 재미있는 프로젝트가 유행을 타면서,
그 아이디어를 차용해서 프로젝트를 기획하게 되었다.
2. 작업 과정
📌 기획
총괄 진행을 맡은, 백엔드를 담당해 줄 ethan과 사전 기획을 해보았다.
사용할 stack은 내가 주로 사용중인 것들로 구성을 하고,
전체적인 페이지의 구성에 대해 기획한 것들을 디자이너 heather에게 전달했다.
📌 디자인 & 개발
머릿속에 그려놓은 것들을 시각화하기 위해 디자이너에게 프레젠테이션으로 초안을 그려 보여주고,
slack과 figma로 계속 커뮤니케이션을 하며 수정해나갔다.
이 과정에서 디자인시스템의 필요성에 대해서 뼈저리게 느끼게되었다.
📌 QA -> 배포
1차 완성본을 가지고 여러 기종의 핸드폰을 사용해서 QA를 진행하며 어색한 부분을 수정한 후에 배포!
실제 서비스로 배포하는 기간은 간단히 메세지만 작성해서 저장하는 기능뿐이라,
일주일정도로 짧게 잡았다.
주로 카카오톡과 인스타그램을 이용해서 링크를 돌리기 시작했고,
최대한 은퇴식 당일까진 아빠 귀에 들어가지 않길 바랬는데,,
어른들에게는 깜짝 이벤트따윈 없던..것 같다 ㅎ
📌 후반 작업
D-day인 은퇴식에, 실제로 보기 편하게 편지를 프린트해서 선물해드렸다.
그 장면을 유튜브에 올릴 영상으로 편집한 후,
후기 영상을 보여줄 수 있는 페이지로 수정작업을 거쳤다.
3. issue를 해결하는 과정
작업을 진행하면서 발생했던 주요 issue에 대해서 간단하게(정말 간단하게) 정리해보고자 한다.
-
컨텐츠의 view를 원하는대로 쌓기
의도대로 view를 쌓기 위해서는position과z-index를 적절히 사용해야 한다.
position: absolute의 경우에는, 해당 속성을 적용하고 싶은 곳의 부모 컴포넌트에position: relative가 걸려있어야 된다.
=>relative가 중복되서 사용되거나 없을 경우엔 원하는 대로 스타일링이 되지 않을 수 있다.
(ex. drawer를 구현할 때, 배경 전체에 opacity가 제대로 적용되지 않음) -
swiper의 bullet 위치 조절
디자이너의 요청에 따라서,bullet의 위치조정이 필요했다.
swiper는 class명에 따라서 스타일링을 조정하는 것이 필요했는데,
해당 프로젝트에서는.swiper-pagination { bottom: 00px !important }를 설정하여 강제로pagination의 위치를 조정했다. -
PNG vs SVG
처음에 디자이너분이 구글드라이브에 올려준 이미지의 확장자가png였다.
그러다보니 실제 프로젝트에 사용했을 때, 크기에 따라서 이미지가 너무 깨지는게 눈에 보였다.
이미지로 만들어진 배경도 사용해야했기 때문에,
크기가 변경되도 깨지지 않는svg확장자로 변경해서 재작업을 하게 되었다.
나중에 차이점에 대해서 정리해보아야겠다 -
기기에 따른 반응형 뷰 작업
반응형웹 작업을 했다고 하기엔, 웹상에서 페이지를 열었을 때 어색한 점이 꽤 많다.
다만, 핸드폰도 기종에 따라서 화면 사이즈가 다르기 때문에
모바일 뷰에 따라 여백이 생기지 않을 수 있도록 작업하는 것이 필요했다.
그래서 배경의width나height를 유동적으로 변할 수 있는 상대적인 크기(%, vw, vh 등)를 설정했다. -
router 구조 변경
react-router-dom이 v6로 버전업이 되면서 변경점이 꽤나 많았다.
게다가Header컴포넌트의 유무에 따라서router를 다르게 설정해야 할 것 같아, 처음 설계했던 구조를 엎어버리고 새로 구조를 짜야했다.
=>Header컴포넌트가 필요한 페이지에서는, 자식태그로 중첩하는 라우팅을 연결한 후Outlet라이브러리를 통해 컴포넌트를 가져왔다.
4. 작업 후기
첫 회사에서는 디자이너가 없는 상태에서 일을 시작했었다.
때문에 이번 작업은 이미 그려져 있는 것이 아닌,
처음으로 기획부터 디자이너와 협업을 해보았던 것이었다.
내가 기획한 프로젝트에 대해 디자이너에게 설명하는 것이 쉽지 않은 일이란걸 깨달았다.
게다가 그림에 소질이 없는 나는,
디자이너에게 내 머릿속 그림을 시각화해서 설명하기가 꽤나 어려웠다,, 😭
다행히 결과적으로는 너무 맘에 드는 작업물이지만,
애정하는 프로젝트인 만큼 조금 더 깔끔한 코드로 수정해 볼 예정이다.
+ tmi로 다음 전자기기는 아이패드일 것 같다 ㅎ 프레젠테이션으론 부족해,,
