지난 한 달간 진행했던 파이널 프로젝트 회고를 하며 앞으로 어떻게 성장해 나갈지 고민하는 시간을 가져보겠습니다.
아이디어 회의 ✍️
'바쁜 일상 속에서 경험하는 느림의 미학'
.jpg)
가장 먼저 한 일은 각자 아이디어를 준비해 발표하기로 결정했습니다.
제가 어떤 서비스를 사용하면서 불편함을 느꼈거나 개선했으면 좋겠다고 생각했던 기억들을 떠올려 보았습니다.
휴식을 취할 때 'Calm' 이라는 어플을 자주 사용해 왔는데,
음성 파일만을 지원한다는 점이 아쉽다고 느꼈던 적이 있습니다.
그래서 휴식을 위한 영상을 시청할 때는 유튜브에 접속하곤 했는데, 랜딩 페이지에 있는 자극적인 썸네일들의 유혹이 너무나 컸고, 때로는 그 유혹에 지고 말았습니다.
저는 유혹을 이겨내는 법은 그러한 환경에 노출되지 않는 것이 최선이라고 생각을 했기 때문에 '휴식을 위한 영상 제공 서비스'를 기획하면 좋겠다고 생각했습니다.
그렇게 Slow TV 장르 영상 컨텐츠를 제공하는 서비스가 떠올랐고,
해당 서비스에 대한 소개와 프로젝트의 방향에 대해서 기획서를 작성하여 발표했고, 모든 발표가 끝난 후 대화를 통해 Slow TV 라는 주제로 프로젝트를 진행하기로 결정 되었습니다.
스택 및 역할 분담 👨👩👦👦
지난 프로젝트에서 백엔드를 경험했기에 이번엔 프론트엔드를 담당하였습니다.
저의 아이디어가 선정되었기에 이해도가 가장 높은 점과 평소 디자인에 관심이 많았기에 전체 UI와 컴포넌트 설계를 하게 되었습니다.
CSS에 대한 고민 🤔
'어떻게 하면 유저가 컨셉을 잘 이해하며 재미 요소를 느낄 수 있을까?'
저는 전체 UI와 디자인을 담당하면서 2가지를 중적으로 고민했습니다.
첫 번째는 근거 있는 디자인이였습니다.
그저 보기 좋은 디자인이 아니라, 컬러, 폰트, 배치 등 세세한 부분까지 합당한 근거가 있는 디자인을 만들고 싶었습니다.
디자인을 통해서도 일관된 메세지를 주고 싶었기 때문입니다.
두 번째는 창의적인 디자인였습니다.
여러 웹 서비스에서 비슷한 디자인을 많이 보았기 때문에 차별성을 두고 싶었습니다.
저희 서비스에서는 독창적인 디자인과 인터랙션을 통해 재미요소까지 주면 좋겠다고 생각했습니다.
저희 서비스의 컨셉을 생각했을 때, TV의 대표적인 육면체와 블랙 컬러가 떠올랐습니다.
그래서 평면의 이미지를 TV의 육면체로 만들기 위해서 perspective와 border 속성을 이용해 원근감과 테두리를 만들어 평면의 이미지를 입체화 시켰습니다.
덕분에 컨텐츠 페이지에서 각각의 이미지가 하나의 TV를 연상시킬 수 있도록 하였습니다.
그리고 이미지와 텍스트를 통해 각 카테고리에 대한 간략한 설명을 할 수 있었고, 유저가 이미지를 클릭 시 카드의 순서가 바뀌도록 하여 인터랙션 요소를 추가하였습니다.
이미지를 TV처럼 육면체화 시켰기 때문에 사이드 바 또한 리모콘으로 만들었을 때 조화로우면서 재미 요소에 대한 문제도 해결할 수 있다고 생각했습니다.
리모콘을 킬 때 티비를 바라보며 사용하기 때문에 리모콘을 움직일 수 있도록 하였고, 유저 입장에서 서비스 사용시 눕혀진 리모콘이 화면을 가려 불편할 수 있기에 사이드 바 최상단 On/Off 버튼으로 리모콘의 위치 조정을 할 수 있도록 하였습니다.
물론 Off 상태에서도 각 기능들을 사용할 수 있도록 하였습니다.
각 카테고리 페이지에는 영상이 20개씩 있기 때문에 컨텐츠 페이지와 달리 가독성을 높이는데 중심을 두었습니다.
3x7으로 배치하여 가독성을 높이고 유저의 선호도를 체크할 수 있는 좋아요 버튼을 썸네일 좌측 하단에 추가하였습니다.
썸네일 이미지에 방해되지 않도록 불투명도 opacity를 주어서 평상시에는 잘 보이지 않고 좋아요 버튼을 클릭한 영상만 잘 보이도록 했습니다.
Redux의 도입 🔥
'효율적인 상태 관리 필요해!'
리액트를 사용하면서 가장 불편하게 느꼈던 점이 '상태 끌어올리기'였습니다.
그래서 Redux 혹은 Mobx 도입을 고려했습니다.
사실 2021 IT 동향을 묻는 한 설문에 따르면, Redux는 3년 안에 사라질 가능성이 있는라이브러리로 뽑혔다고는 하지만, 현업에서 사용되고 있는 점과 보다 상태를 체계적으로 관리하여 협업에서 큰 이점을 발휘할 수 있다고 생각하여 선택하게 되었습니다.
위기, 그리고 캥거루 이야기로 극복 🦘
'복잡한 개념은 단순화'
보다 편리하게 상태 관리를 하기 위해 도입한 리덕스가 생각보다 많이 어려웠고 오히려 상태 관리의 복잡성보다 해당 스택을 공부하는 것이 더 큰 어려움이였습니다.
하지만 숙련도를 기르기 위해 오래 걸리는 만큼 사용했을 때 이점도 클 것이라고 생각했습니다.
그래서 프로젝트 초반에는 진도를 나가기 보다 공부를 하는 시간을 더 많이 가졌습니다.
.jpg)
리덕스를 사용할 때 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하였고,
리덕스 관련 코드에서는 Ducks 패턴을 사용하였습니다.
그 이유는 관심사를 분리하여 각 기능에 맞는 코드에 집중을 하기 위함과 Ducks 패턴을 사용하지 않았을 때는 새로운 액션을 만들거나 하나의 액션과 관련된 코드들을 찾아 볼 때 여러 파일들을 찾아봐야 하는 번거로움이 있었기 때문입니다.
이렇게 관심사를 분리를 하고 나니 컨테이너 컴포넌트가 프레젠테이셔널 컴포넌트에 props를 내려주는 것이 마치 부모 캥거루가 배주머니에 품은 새끼 캥거루에게 먹이를 주는 것처럼 느껴졌습니다.
프레젠테이셔널 컴포넌트는 그저 props를 받아 UI만 담당하는 것이 새끼 캥거루가 어미로부터 먹이를 받아 먹는 것처럼 느껴졌기 때문입니다.
그래서 저는 컨테이너 컴포넌트를 '부모 캥거루', 프레젠테이셔널 컴포넌트가 '새끼 캥거루', Ducks 패턴으로 작성한 리덕스 관련 코드를 '오리 떼(먹이)'라고 생각했습니다.
(물론 캥거루는 초식 동물이기 때문에 오리를 먹진 않습니다.)
그리고 다음과 같이 짧은 이야기로 정리하여 리덕스를 이해하는데 큰 도움을 받았습니다.
"엄마 캥거루는 오리 떼를 사냥해서 먹기 좋게 손질하여 새끼 캥거루에게 먹이를 주었어요.
새끼 캥거루는 엄마 캥거루로부터 그저 먹이를 받아 먹기만 했습니다."
덕분에 리덕스를 실제 코드에 적용하는 전체적인 큰 흐름을 이해하게 되었고 그 후부터는 프로젝트를 수월하게 진행할 수 있게 되었습니다.
프로젝트의 결과물 📺
-
Landing Page
-
Login Page
-
Contents Page
-
Category Page & Video player Page
-
Favorites Page
-
Profile Page & Modal
아쉬운 점 🥲
조금 더 매력적인 서비스가 되기 위해선 영상의 퀄리티가 중요하다고 생각했는데, 영상을 자체 제작하지 못한 점과
유저와의 소통을 할 수 있는 게시판을 만들지 못한 점이 아쉽게 느껴집니다.
추후에 게시판을 추가하는 등 디벨롭을 하면 좋겠다는 생각이 듭니다.
앞으로는 어떤 개발자? 🏃♂️
이번 프로젝트에서는 사용자 경험에 대해 고민하는 시간을 갖을 수 있었습니다.
비단 코딩을 할 때 뿐만 아니라, 평소에도 세상을 바라보는 관점을 문제를 겪고 있는 이들의 관점에서 바라본다면 더 많은 문제 해결에 도움이 될 수 있는 개발자가 될 수 있겠다는 생각을 했습니다.
누군가의 작은 문제도 소홀히 여기지 않고 진심으로 공감할 줄 알며, 창조력 상상력을 지닌 개발자가 되도록 노력해야겠습니다.
코드스테이츠에서의 마지막 프로젝트를 마치며 회고를 마무리 하겠습니다.
