UI는 생각보다 중요하다

이서기 멘토님과 멘토링을 하면서 가장 많이 받았던 피드백은 ui였다. 사용자 입장에서 불편한 부분이 많았다. 색도 중구난방으로 많이 사용하고 버튼도 쓸데없이 많았다. 그래서 버튼을 최소한으로 줄이고 새로운 영역을 만들었다. 그리고 새로운 색을 선정하여 통일감을 주었다. 며칠동안 틀을 바꾸는 작업을 했다. 기능이 가장 중요하다고 항상 생각했다. 하지만 디자인이 바뀌고 나니 기능은 같지만 전혀 다른 서비스가 되어있었다.

ui 개선을 하며 css와 styled component에 대해 좀 더 공부하게 되었다. 서비스에 있어서 디자인과 ui가 매우 중요한것 같았다. 이를 구현하는 것도 프론트엔드 개발자의 역량에 따라 다를 수 있겠다는 생각을 했다. 공부를 하다보니 공식처럼 사용하는 기능들이 있는 것 같다. 더 많이 사용하며 경험을 쌓아야 할 것 같다.

소통은 매우 어렵다.

우리 팀원들은 2월 말에 모두 코로나 확진 판정을 받았다. 나는 다른 팀원보다 하루 늦게 양성 판정을 받았다. 그래서 팀원들 물품을 옮겨주다가 나도 기숙사 방으로 향했다. 검사 받고 기숙사로 이동하느라 시간을 많이 버렸다. 그리고 팀원들의 몸이 좋지 않아 프로젝트가 제대로 진행이 되지 않았다. 사실 확진 판정 전부터 팀원들이 아파서 어려움이 많았다. 그러다 각자 방으로 흩어져 게더타운에서 만났다. 게더타운이라도 있어서 매우 다행이었다.

하지만 게더타운도 한계가 있었다. 옆에 있어도 하는일을 잘 모르는데 게더타운에서 하려니 더욱 어려웠다. 그래서 시간을 정해 미팅을 진행하고 서로의 요구사항을 완벽하게 이해할때 까지 충분히 설명하였다. 그리고 화면 공유도 적극적으로 사용했다. 좋지 않은 상황에서 내가 할 수 있는 최선을 다하려 노력했다.

지나고 보니 정말 절망적이었지만 팀원들과 문제를 잘 해결했던것 같다. 다른 어떤 어려움을 만나도 해결할 수 있을것 같은 느낌을 받았다.

배운것으로 한계를 느끼는 것은 새로운 것을 배워야 할 때라는 것이다.

처음 나만의 무기를 시작할 때 자바스크립트를 생활코딩 강의를 들으며 공부했다. 강의를 들으며 가장 인상적이었던 문구가 있었다. “바로 제목인 배운것으로 한계를 느끼는 것은 새로운 것을 배워야 할 때라는 것이다.” 이다. 무언가를 배우고 배운것을 열심히 사용하다 보면 한계를 느끼는 순간이 온다고 한다. 이때 새로운 것을 배워서 적용할 시기라고 했다. 처음 들었을 때는 잘 느껴지지 않았다. 하지만 날이 갈 수록 알아야 할 것이 늘어났다. 한계를 만날 때 마다 당황했지만 새로운 것을 배워서 문제를 해결할 때 마다 성취감이 엄청났다.

대표적으로 로그인 상태를 관리하기 위해 리덕스를 공부했다. 여러 컴포넌트를 사용하다 보니 수가 늘어날 수록 계층관계가 복잡해졌다. 컴포넌트간 상태 전달로는 한계가 있었다. 그래서 리덕스를 사용하여 어디서든 로그인 상태를 접근할 수 있도록 구현하였다. 처음에는 세션스토리지에 저장도 해보고 컴포넌트에 상태로 전달도 해보았지만 한계가 있었다. 그래서 잠시 고민하다가 다른 동기들이 리덕스를 사용한다는 말을 듣고 우리 프로젝트에 적용하였다. 문제를 해결했을 때 저 문구가 떠올랐다. 그래서 항상 공부해야 한다는 말이 나오는 것 같았다. 공부를 엄청 좋아하지는 않지만 이렇게 문제를 해결할 수 있다면 꾸준히 공부할 맛이 날 것 같다.

때로는 뒤집어서 생각해 보자.

학습기록 페이지에서는 일간 기록, 일간 순위, 기간 기록을 확인할 수 있다. 또한 내보내기 버튼을 클릭하면 각 탭의 컴포넌트들을 캡쳐하여 이미지로 다운 받을 수 있다. 일간 기록과 기간 기록의 컴포넌트들은 문제없이 캡처되었지만 일간 순위에서 문제가 발생했다.

위의 그림을 통해 설명을 해보면 다음과 같다. 일간 순위 탭을 클릭하면 Start 상태에서 두 개의 컴포넌트가 점선 방향으로 이동하며 End 상태가 된다. 처음 내보내기 기능 구현 당시 일간 순위를 캡처하면 왼쪽 이미지와 같이 저장되었다. 왼쪽의 이미지는 다른 사람에게 공유할 수 없는 의미 없는 이미지이기 때문에 문제를 해결하기 위해 방법을 찾기 시작했다.

처음 캡처 기능을 구현하기 위해 use-react-screenshot 모듈을 사용했다. 그래서 해당 모듈을 사용하는 것이 문제일 수 있다는 다른 팀원의 의견이 있어 캡처에 많이 사용되는 html2canvas를 이용하려 했다. 변경 전 사용하던 모듈을 살펴보았는데 해당 모듈도 html2canvas를 이용하고 있어 모듈의 문제가 아님을 확인했다.

그래서 어떻게 수정해야 할지 방향을 다시 잡아야 했다. 이 기능을 구현했던 시점이 프로젝트 종료 직전이어서 내보내기 기능을 일간 순위에서는 제외하는 것이 좋겠다는 의견도 있었다. 하지만 나는 문제의 원인이 Start 지점에서의 컴포넌트 위치 때문이라 생각했다. 따라서 이를 수정하면 쉽게 문제를 해결할 수 있다고 생각했다.

처음 css로 애니메이션 효과를 줄 때 animate.style에서 코드를 참고하여 구현했다. 나는 애니메이션 효과를 우리의 상황에 맞게 직접 설정하면 문제를 해결할 수 있다고 생각했다. 그래서 일간 순위와 비슷한 애니메이션 예시를 찾아보았다. 구글링을 하다 보니 설정한 애니메이션을 역재생할 수 있다는 것을 알게 되었다. 만약 초기 위치를 End로, 애니메이션 종료 위치를 Start로 설정한 후 역재생시킨다면 문제를 해결할 수 있다고 생각해 코드를 수정했다. 코드를 수정한 결과 알맞은 화면이 캡처되어 내보내기 기능 오작동을 해결했다.

이 문제를 해결하며 문제가 발생했을 때 약간만 비틀어 바라보면 의외로 쉬운 해결법이 숨어 있을 수 있다는 점을 알게 되었다. 그리고 비틀어 바라보고 문제를 해결 하려면 기존의 방법을 바꿀 수 있다는 점도 나 스스로 인지하고 있어야 하는 것 같다. 기존에 작성했던 코드를 너무 애지중지 다 가져갈 필요는 없다는 의미이다.