목차
1일 차
UI 프로젝트는 컴포넌트화하는 것에 익숙해지는 것이 목표였다. 다양한 시안을 제공해 주셨고, 다양한 컴포넌트를 만들고, 시간이 남는다면 컴포넌트를 모아서 페이지를 만들 수 있다고 하셨다. 우리 조는 웹디스코드를 클론한 페이지를 만들어 보기로 했다. DM 탭에서 친구 목록을 클릭하면 친구와의 채팅이 보이듯이 각자 소개를 보여주고, 채널 탭에서는 각자 만든 부분을 설명하는 채팅이 보이도록 꾸며봤다. 라디오 버튼을 사용해서 화면 전환이 되도록 해보자고 하고 프로젝트를 시작했다. 나는 맨 왼쪽에 있는 탭을 만들기로 했다.
잘 한 것
라디오 버튼을 지난 번 로그인 과제에서 '로그인 유지' 체크박스를 만들었던 것처럼 해봤다. label은 숨기고 라디오 버튼 쪽을 가지고 수정했더니 포커싱 문제도 그렇고 한 번에 해결했다!
아쉬운 것
호버 메시지를 말풍선 모양으로 예쁘게 꾸미고 싶었는데 생각대로 잘 안 됐다. 호버 메시지 창을 가상 요소로 스타일링했는데, 말풍선 꼭지(?)를 추가하려고 before와 after를 모두 사용했다. 그렇게 하고 border를 적용하니까 세모와 네모 사이에 선이 생겼다. 그래서 clip 함수를 사용했더니 이번에는 border까지 잘려버렸다. 일단은 네모로 유지하기로 했다.
더 알아볼 것
라디오 버튼으로 화면에 보이는 것을 제어하려고 했는데, 그거 말고 탭박스였나? 그런 기능이 있었던 것 같은데, 내일 한 번 찾아봐야겠다.
2일 차
어제 하던 서버 탭을 이어서 개발했다.
잘 한 것
버튼 호버 효과로 애니메이션을 추가했다. 자연스럽게 색이 변하거나 호버 메시지가 자연스럽게 튀어나오도록 transition 속성과 키프레임 애니메이션도 사용해 봤다. 덕분에 애니메이션을 사용하는 법을 복습했다. 언제 키프레임을 사용하고, 언제 transition으로 해결되는지 조금 더 명확하게 알게 됐다. 프레임별 애니메이션 전환이 필요한 게 아니라면 transition만으로도 충분히 애니메이션을 구현할 수 있다.
이벤트 버블링에 대해 배웠다. JS에서 사용하는 기능인데, 부모 요소에서 이벤트가 발생하지 않으면 자식 요소로 하나씩 내려가면서 이벤트가 발생할 때까지 타고 내려가는 기능이라고 한다.
아쉬운 것
탭 박스는 자바스크립트가 있어야 사용할 수 있다. 라디오 버튼으로 그대로 가야겠다. 이번 프로젝트는 자바스크립트를 사용하지 않고 해보기로 했기 때문이다.
협업이라는 게 익숙하지 않아서 조금 어렵게 느껴진다. 깃허브로 여럿이 같이 관리하니까 커밋 메시지나 PR 요청할 때 조금 겁난다. 잘 할 수 있을지 걱정도 된다. 그래도 할 수 있는 것부터 차근차근 하나씩 해나가자!
더 알아볼 것
키보드로 접근했을 때 앵커 버튼의 포커스 링이 찌그러지는 이유를 확인할 필요가 있다.
3일 차
서버 탭 디테일 잡고, 호버 메시지 말풍선 모양으로 만들었다.
잘 한 것
앵커 버튼의 포커스링이 찌그러지는 이유는 못 찾았지만, outline을 재정의하니 해결됐다. 다른 방법으로 해보려고 이리저리 시도하다가 혹시나 하고 재정의했더니 바로 해결돼서 조금 허무하다.
호버 메시지를 말풍선처럼 변경하는 데 성공했다! 이리저리 사이즈 계산하고, before 가상 요소나 span 요소를 사용해서 네모를 만들고 45도 회전한다. 원래 있던 네모 상자를 clip-path 속성을 사용해서 border가 안 보이게 왼쪽 가운데 부분만 살짝 잘랐다. 그랬더니 말풍선과 꼬리 사이에 선 없이 자연스럽게 border가 연결됐다. 컴포넌트화해서 공유까지 완료했다!
배운 것
충돌을 최소화하면서 브랜치를 합치는 방법!
git stash # 현재 작업을 임시 저장(commit 한건 상관 X)
git switch develop
git pull origin develop
git switch my-feature
git merge develop # 또는 git rebase develop
git stash pop # 작업 복원
4일 차
서버에서 보이는 채널 목록 탭 구현을 시작했다.
잘 한 것
채널 목록에 호버 효과를 줄 때 고생을 좀 했다. 호버하면 버튼이 두 개, 또는 세 개가 보여야 한다. 거기에 맞춰서 글자가 잘릴 때 말줄임표를 추가하려고 했다. 말줄임표를 넣는 것까지는 했는데, 버튼이 보일 때 글자가 더 줄어야 하는데 말을 안 들었다. 버튼이 글자랑 계속 겹쳤다. flex를 사용하니 바로 해결됐다. 글자 부분이 남은 공간을 차지하도록 했었는데, 버튼을 absolute로 띄워놨던 거다. 그래서 겹칠 수밖에 없었다. 버튼도 flex item으로 지정하니까 버튼이 보이게 되면 버튼 크기 만큼 글자 부분의 공간이 줄었다.
아쉬운 것
호버 메시지랑 접근성을 바로 추가하고 싶었는데, 시간이 늦어서 다음으로 미뤘다.
배운 것
넘치는 텍스트에 말줄임표 생성하기
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* 이게 말줄임표 */
5일 차
중간 피드백을 받았다. 자바스크립트를 안 쓰려고 했는데, 쓰기로 했다. 그래서 이전에 라디오 버튼으로 만들었던 것들을 다시 일반 버튼으로 바꾸는 작업이 필요하다. 앵커 태그에 href 속성 값을 비워두면 안 된다. '#' 기호를 할당했다.
잘 한 것
라디오 버튼을 일반 버튼이나 앵커 버튼으로 바꾸면서 포커스 링이 찌그러지는 이유를 알게 됐다! a 요소에 포커스가 갔을 때 before와 after 가상 요소까지 포커스되면서 포커스링이 세 요소에 모두 생긴다. 그러면서 포커스 링이 찌그러지게 되는 거였다.
6일 차
각자 자기 소개 페이지를 꾸미고, 메인 페이지에서 교육용으로 만든 페이지임을 명시하는 모달창을 만들었다. 앵커로 바꿨던 버튼들을 다시 라디오 버튼으로 롤백했다. 선택되어있는 상태의 스타일링 때문이다.
잘 한 것
자칫 놓칠 수 있었던 메인 페이지의 title이 'Document'로 되어있는 걸 발견했다. 까먹고 있었는데 생각나서 바꿨다. 작은 디테일을 발견해서 뿌듯했다.
모달창을 잘 만들었다고 조장에게 칭찬받았다. 메인 페이지의 디스코드 분위기에 맞춰서 색상이나 모양을 수정했는데, 무에서 유를 창조한 것처럼 칭찬했다. 부끄러우면서도 기분이 좋았다.
아쉬운 것
벌써 내일이 프로젝트 마지막 날이다. 시간이 널널한 것 같아서 고객 지원 페이지도 구현하려고 했는데, 다른 디테일들도 잡고, 발표용 페이지도 만들고 해야 하다 보니 고객 지원 페이지는 내려놓기로 했다. 만들어 보고 싶었는데 아쉽다. 나중에 혼자라도 해봐야겠다.
배운 것
모달창을 script로 제어하지 않으면 배경에 ::backdrop 요소가 생성되지 않는다는 것을 알게 됐다. 처움부터 열러 있도록 마크업 단계에서 open 속성을 줬는데, 그러면 자바스크립트로 제어할 수 없어서 ::backdrop 요소가 생성되지 않는다.
backdrop-filter 속성을 사용하면 배경을 뿌옇게 만들 수도 있다.
7일 차
시간이 더 있는 줄 알았는데 오늘이 발표날이었다! 어제 밤에 조장이 발표하고 싶은 사람 없냐고 물어봤는데 조용하다. 내가 하겠다고 했다. 발표 후에는 각 조의 최종 피드백을 듣고 슬비 쌤과의 마지막 인사를 했다.
잘 한 것
내가 발표하겠다고 하길 잘했다. 발표를 좋아하지 않지만 이런 기회를 잡아봐야겠다고 생각해서 도전했다. 하지만 발표 시간이 다가올수록 점점 떨려서 괜히 하겠다고 했나 싶었는데 다른 조원들이 격려도 많이 해주고 도전을 응원해줘서 마음을 다잡고 도전했다. 떨린다고 했어서 그런지 다른 조원들이 이런 것도 얘기해 보면 어떻냐고 이것저것 추천해줬다. 고마웠다.
발표는 다행히 잘 마쳤다. 발표 전까지 다들 부랴부랴 이것저것 수정하고 마무리하느라 정신이 없었는데, 발표 시작하기 전에 다 잘 마무리했다. 발표도 천천히 하나씩 설명하다 보니 시간도 딱 맞춰서 마칠 수 있었다. 목소리가 좀 떨리긴 했지만, 어차피 다 똑같이 떨면서 한다고 생각하니 오히려 마음이 차분해졌다.
아쉬운 것 + 배운 것
마지막 피드백을 받으면서 문법 오류를 확인하지 않은 것을 깨달았다. 항상 문법 오류를 확인하는 습관을 들여야겠다. 특히 HTML이나 CSS는 웬만한 오류는 정상적으로 작동하는 것처럼 보이기 때문이다. 오류가 있을 때 알려주지 않기 때문에 문법 오류를 확인하는 것은 기본 중의 기본이다! 다음에는 문법 오류를 확인하는 것을 까먹지 말아야겠다.
가장 기억에 남는 일
역시 문제를 해결해 낸 경험들이 가장 기억에 남는다. 그리고 마지막 발표도! 진짜 용기를 쥐어짜서 했다고 해도 과언이 아닌데, 그래도 잘 마무리한 경험이 생기니까 다음에도 발표를 또 도전해 보고 싶다는 생각이 든다. 실패해도 괜찮다, 틀려도 괜찮다, 못 해도 괜찮다, 그러면서 이겨내는 경험이 더 중요하다는 것을 배운다. 넘어져도 다시 일어나는 게 중요하다. 해결할 수 없을 것 같은 문제를 마주쳐도 내가 할 수 있는 것을 하면서 차근차근 하나씩 풀어나가다 보면 어느새 커보였던 문제는 별 것 아닌 문제가 되어있다. 앞으로도 계속해서 성장하고 더 나은 개발자가 되기 위해 노력해야겠다!
