What I Learned Today
나는 26일부터 UI 프로젝트를 시작했고 목요일에 끝이 났다.
우리 팀은 4조였고 총 4명으로 이루어져 있었다.
강사님이 피그마로 디자인 시안을 주셨다. 우리는 주어진 시안 말고 뭔가 특별한 것을 하고 싶어서 우리 팀은 웹 디스코드를 클론 하기로 했다.
하지만 디스코드 UI가 최근에 바뀌기도 했고 디자인 시안이 별로 없었다.
그래서 우리는 개발자 도구를 사용하여 하나하나 뜯어보며 디자인을 하기로 정했다.
피그마에 옮겨둔 디자인은 그냥 참고만 하고 우리는 실제 디스코드 웹에 들어가서 스타일 가이드를 분석했다.
생각보다 다른게 너무 많아서 디테일을 잡을 때 시간이 많이 걸렸다.
나는 유저 프로필, 다이렉트 메시지 탭, 사이드 프로필 탭을 만들었다.
처음에는 유저 프로필, 다이렉트 메시지 탭만 만들려고 했는데 하고 만들고 시간이 남아서 사이드 프로필 탭도 만들었다.
우리는 개인 DM 페이지에 자기소개를 넣고 채널 페이지에 컴포넌트 소개들을 넣는 구조를 생각하고 만들었다.
처음에는 js를 최대한 사용하지 않고 만들자는 취지로 시작했지만 하나의 페이지에서 탭을 이동할 때는 js가 필요했다.
그래도 최대한 사용하지 않고 페이지 이동에만 사용했다는게 나는 정말 좋았다.
여러 트릭을 사용하여 js없이 기능들을 구현하는 게 재밌었다.
끝나고 나서 코드들을 쭉 보니 만약 js가 있었다면 거의 모든 컴포넌트들이 버튼으로 채워지지 않았을까 라는 생각이 들었다.
그리고 디스코드가 생각보다 접근성을 많이 챙겼다는것을 알았고 컴포넌트화가 엄청 잘 되어있어서 구현하는 게 많이 어렵지도 않았다.
이번 프로젝트를 하며 팀프로젝트의 재미를 정말 많이 느꼈고 협업을 할 때 깃을 어떻게 사용해야하는지를 많이 배운 것 같다.
그리고 코드를 짤 때 다음에 올 기능들을 미리 예측하여 코드를 짜는 것도 중요하다고 생각했다.
결과물은 이렇다.
