스파르타코딩클럽 내일배움캠프 80일차

오늘 일과 간단 요약

1. 오전 스크럼
2. header, 로그인/회원가입/비밀번호 재설정 모달창 UI 수정
3. my page 프로필 UI 수정
4. 오후 스크럼
5. 프로필 수정 모달창 UI 수정

 

 

 

 

 

 

 

 

header, 모달창 UI 수정

오늘은 뭐 기능을 할 건 아니었고....디자이너님이 디자인 해주신대로 UI를 수정하는 걸 했다.

사실 완벽한 최종 디자인은 아니고, 아직 수정할 부분이 남이있긴 하지만 지금 현재 UI가 그야말로 이 자리엔 이게 있어야 합니다, 정도의 UI라서 피그마에 올려주신 디자인을 토대로 만들었다.

 

기능 구현도 힘들긴 하지만 솔직히 UI 구현하는 것도 그거랑 비슷하게 힘든 것 같다.

일단 내가 디자인적 감각이 별로 없는 것 같다(?) margin이 얼마나 있어야 적절한지 header의 크기가 어느 정도여야 적절하지 등등... 디자이너님이 잘 적어주시긴 했는데 나의 이해가 부족한 관계로...그냥 그런갑다 하고 구현했다 ㅋㅋㅋㅋ

 

그리고 tailwind도 안 만진지 일주일 지나니까 그새 다시 낯설어졌다. 그래서 다시 공식 문서와 cheatseat를 보면서 했다. 사실 styled-components 쓸 때도 잘 몰라서 계속 찾아보긴 했다. 아무래도 UI 구현이 더 어려운 듯...?ㅋㅋㅋㅋ

그것 때문인지 아니면 오늘 컨디션이 그다지 좋지 않아서 인지 잘 모르겠지만...아무튼 UI 수정도 시간이 제법 걸렸다.

 

로그인 모달

회원가입 모달

비밀번호 재설정 모달

오늘 구현한 모달창이다. 모달창의 header(?) 부분이 가운데 정렬이 잘 안되어서 이걸 해결해보려고 했는데 잘 안 된 관계로...우선은 여기까지만 해두고 PR해서 dev에 merge했다.

 

원래는 모달창부터가 동글동글하고 버튼도 동글동글, 그리고 보라색(개인적 기호)으로 했었는데 우리 웹페이지의 컨셉이 블랙과 화이트이므로 모달창 rounded도 없애고 전부 바꿨다. 확실히 바꾸니까 좀 더 깔끔해보인다. 나중에 최종 디자인 나오고 바뀔 점이 있을지는 모르겠지만 일단은 지금 버전도 난 사실 괜찮아 보인다 ㅋㅋㅋ

 

 

 

 

 

 

 

유저페이지 프로필 부분 UI

그 다음으로 내가 맡은 부분인 유저 페이지의 프로필 부분.

 

이 부분은 피그마를 보니까 임시로 자리를 잡아놓은 것과 실제 디자이너님이 만들어두신 디자인과 좀 달라서 더 오래 걸렸다. 그런데 여기서 약간의 문제점을 발견했다.

 

모니터로 작업을 하고 있는데, 내 모니터의 화면이 크다 보니까 화면 비율이 안 맞았던 것이다. 지금까지는 모니터 화면 비율 기준으로 계속 비율을 맞췄었는데 피그마에 나와있는대로 하다보니 너무 컸다가 작았다가 해서 노트북으로 옮겼더니 거기서는 또 적절했다.

 

가로 길이가 1920px 기준으로 해야 했는데 모니터 가로 길이가 그 이상이어서 아무래도 비율을 잘못 생각했던 것 같다. 그래서 고민하다가 아직 최종이 아니므로 그냥 피그마에 나와있는 px 기준으로 만들었다. 피그마 기준으로 하니까 노트북에서는 생각보다 커보여서 이 부분도 나중에 디자이너님께 전달해드려야겠다.

 

지금까지 한 번도 이런 생각을 해본 적 없었는데, 모니터 화면이 생각보다 컸었나 보다. 이전에는 그냥 기능 구현 뒤에 적절한 위치에 있게만(?) 했어서 그런지 정확한 UI를 구현하려고 하니까 제법 오래 걸린다.

 

 

이게 모니터 절반 기준 화면이다. 한쪽에는 크롬을 띄워두고 오른쪽에는 vscode로 치면서 하다보니까 비율이 이런데, 이걸 노트북 화면으로 옮겨서 보니까 확실히 크기가 크다. 그리고 아직 반응형까지는 안해서 반응형 기준도 해야 하는데...요런 것들은 아마 중간 발표 이후에 좀 더 보완하지 않을까 싶다. 여튼 이렇게 바꾸고 나니까 훨씬 프로필 사진이랑 유저 이름이 잘 보이긴 했다.

 

 그리고 캡처본이 잘려서 그렇지만 아래에 내가 쓴 글과 좋아요한 글들 모아보는 기능도 있으니까 좀 더 웹페이지가 깔끔해 보일 것 같아서 기대가 된다.

 

프로필 수정 모달도 이런 식으로 바꿨다. 모달창의 프로필도 동그란게 아니라 네모로 바꿀까 했는데 프로필 수정할 때는 동그란게 더 예뻐보여서 이걸로 우선 했다. 나중에 디자이너님이 컨펌 주시면 바꿔야지 뭐...ㅎ

 

 

 

 

 

 

 

 

 

 

짧은 일기

오늘은 아침부터 컨디션이 별로더니 하루종일 컨디션이 좋지 않았다. 체력이 중요한데....매번 프로젝트 할 때마다 까먹는 느낌이다. 어쩜 최종 프로젝트마저 끝나갈수록 체력이 안 좋아지는 것인지...ㅋㅋㅋㅋㅋ 여튼 그래서 오늘은 UI 구현하는 것도 시간이 오래 걸렸다. 평소였으면 이정도까지 오래 걸리지는 않았을 것 같은데 쉬엄쉬엄 하느라 좀 아쉽다.

 

 내일은 목표한 마무리 날이니까 마지막으로 최종 점검해보고, 버그가 있는지 수정할 게 있는지 한 번 더 체크해야겠다. 그리고 가능하다면...회원 탈퇴 기능도 만들면 괜찮지 않을까? 이건 내일 스크럼 때 이야기 해보고...굳이 필요 없으면 넣지 않는 걸로. 이번 프로젝트에서는 로그인/회원가입 부분만 맡다보니 정작 어려운 부분은 다른 조원분들이 하고 계셔서 그 부분을 내일 혼자 공부해보던지 해야겠다. 아무래도 내가 맡은 부분이 아니다 보니 내 기능 우선적으로 구현하고 미뤄뒀었는데 다시 한번 코드 보면서 이해해야지...프로젝트 가장 중요한 기능을 이해하는 게 우선이 되어야 하니까...TIL 쓰다가 느낀 건데 직접 이 프로젝트 코드를 쳐보는 것도 괜찮은 방법이겠다는 생각이 든다.

 

 중간중간 트러블 슈팅을 같이 하긴 했지만 직접 구현한 건 아니니까, 배워보고 직접 해보고 싶다는 욕심이 생긴다. 프로젝트 하느라 정신 없는데도 갑자기 호기심 만땅이 되어버린....ㅋㅋ 컨디션이나 열심히 끌어올려야겠다...