크게 어려워보이지 않는 기능같다는 생각에 직접구현을 시도하였습니다. 슬라이드를 담을 컨텐츠를 만들고, 클릭 이벤트가 발생할때마다 컨텐츠의 margin-left에 값을 더하거나 빼서 노출되는 카드를 이동시켜줬습니다. 마지막으로 transformX속성을 적용하여 카드가 더 부드럽게 이동되도록 하였습니다.

하지만 width값에 따른 반응형 디자인을 구현하는 과정에서 어려움이 생겼습니다. 화면 크기에 따라 노출되는 카드의 수를 조정하고 margin-left속성에 적용값을 변경하다보니 동하는게 부드럽지 않았고, 캐러셀이 많아거나 애매한 크기의 경우에는 좌우 대칭이 맞질 않았습니다. 정해진 시간동안 구현해야 하는 기능들은 많은데, 캐러셀 구현에서만 시간이 많이지체되는 것 같다는 생각이 들어 라이브러리의 힘을 빌려보기로 했습니다.

React-Slick 라이브러리를 이용하여 위 문제들을 해결할 수 있었습니다. ( 기본요소들을 커스터마이징하여 디자인하는 시간이 꽤 걸렸지만 ) 반응형 문제를 쉽게 해결할 수 있었습니다. 더불어 화면에 노출시킬 카드의 수, 클릭을 할때마다 넘길 카드의 수 등 많은 옵션들을 쉽게 설정할 수 있어서 훨씬 부드럽게 동작하는 캐러셀을 구현할 수 있었습니다.

개발공부를 시작하면서 다시보고 싶은 웹컨텐츠나, 자주 들어가는 사이트들을 북마크해야 할 일이 늘어났습니다. 브라우저 상단 북마크탭에 저장하거나, 메모장에 링크를 걸어두거나, 메세지 나에게 보내기 등등 여러 방법을 써보았지만, 흩어진 북마크를 찾아 오랜시간 헤매게 되는 불편함이 있었습니다. 심지어 저장해두고도 잊어버려 다시 보지 못하는 경우도 생겼습니다.

그래서 북마크를 보기 좋게 관리할 수 있고, 저장해두고 잊어버리는 일 없이 알림을 받아볼 수 있는 서비스를 직접 만들어보기로 했습니다. 저를 포함해 북마크 기능을 자주 사용하는 팀원들의 경험을 바탕으로 전체적인 웹의 기능을 구체화하고, 사용자에게 더욱 편리한 서비스가 될 수 있도록 UX를 고려한 UI를 만들기 위해 노력했습니다.

단순히 북마크를 추가하고 삭제하는 기본 기능을 구현하는 것에 그치지 않고, 버튼의 위치, 글자, 색상, 화면의 비율 등을 적절히 조정하는 일에 시간을 들였습니다. 또한, 웹페이지 내에 읽지않고 방치된 북마크를 알려주는 알림배너를 구현한 것 외에, 일주일에 한 번 이메일로도 알려주는 이메일 알림기능을 추가해 매번 직접 웹페이지로 들어와야하는 사용자의 불편함을 줄일 수 있도록 했습니다.

정해진 시간내에 기획,디자인,기능구현을 모두 해야해서 아직 부족한 면이 있다고 생각하지만, 저를 비롯한 팀원들 모두 서비스를 만드는 사람, 개발하는 사람의 입장이 아닌 사용자의 입장에서 편리한 서비스를 만드는 일의 중요성에 대해 공감하고 있기 때문에 프로젝트를 더욱 개선해나갈 계획입니다. (recollect.today.service@gmail.com 피드백은 언제나 환영입니다☺️)

A. 당연한 이야기지만, 혼자서 모든 부분을 맡아서 진행하거나, 모든 부분을 함께 구현하는 것이 비효율적인 진행방식임을 앞선 2주 프로젝트에서 경험했기 때문에, 이번 프로젝트에서는 팀원간 컴포넌트 단위, 혹은 페이지 단위로 분업을 해서 코드를 작성하기로 했습니다. 그리고 사전 목업, 프로토타입 제작 단계에서 UI 컴포넌트들을 최대한 통일성있고 꼼꼼하게 만들고, css 루트설정, 변수와 메소드명 규칙을 지키면서 작업을 진행했습니다. 그럼에도 불구하고 코드구조가 복잡해지면서 서로의 코드를 한 번에 이해하는데에 어려움이 있었습니다. 게다가 정해진 시간 안에 각자 맡은 기능구현에 집중하면서, 동시에 다른 팀원의 코드까지 모두 파악하는 것은 쉬운 일이 아니었습니다.

하지만 큰 범위로 나누어 작업한 코드를 다시 세분화해서 재분업을 하고 팀원의 코드에 추가적인 로직을 덧붙여야했을 때, 클라이언트와 서버 코드의 싱크를 맞출 때는 서로의 코드를 충분히 이해해야 했습니다. 그럴때마다 각자의 코드를 설명하는 리뷰시간을 가지거나, 궁금한 점을 자유롭게 물어보았습니다.

또, 팀원이 제작한 컴포넌트를 가져와 재활용해야하는 경우가 있었는데, 일부분만을 변형하는 일이 쉽지 않았습니다. 팀원이 이미 사용하고 있는 컴포넌트 구조와 css를 해치지 않으면서 제가 맡은 페이지에도 삽입해 적용해야했기 때문입니다. 처음에는 비슷한 구조의 컴포넌트를 새로 만들어서 독립적으로 사용할까 고민했지만, 팀원들과 이런 문제상황을 공유하고 상의한 끝에 해당 컴포넌트를 여러 곳에서 사용가능하도록 코드를 수정하여 문제를 해결했습니다.

혼자가 아닌 여럿이서 작업을 할 때 생기는 문제점들을 경험하면서, 다른 사람이 작성한 코드를 이해하는 것, 알아보기 쉬운 코드를 작성하는 것, 재활용하기 쉽게 컴포넌트를 만드는 것의 중요성을 느낄 수 있었습니다.