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

오늘 일과 간단 요약

1. 오전 스크럼 + 회의
2. header, footer UI 구현
3. 개발자+디자이너 소통 특강
4. 오후 스크럼

 

 

 

 

 

 

 

 

오전 스크럼

어제는 기획을 하느라 하루 종일 걸렸고 오늘부터 본격적으로 개발 시작이다. 고로 그라운드 룰도 시작..!

매일 오전 9시 30분부터 30분간은 어제 뭐했고, 오늘 뭐할건지 간단하게 스크럼 하는 시간이다.

노션에 매일 돌아가면서 기록하기로 했고 오늘이 바로 그 첫 날.

 

이었는데, 스크럼이 아닌 회의가 되어버렸다.

 

어제 와이어프레임 대충 하면서 기능을 전부 나열하고 분담했다고 생각했는데 사소하게 정하지 않은 부분들이 너무 많았다. 그래서 그걸 회의하는 시간을 가졌다.

그리고 디자이너님이 메인 페이지 와이어프레임을 빠르게 완성해주셨기 때문에 그걸 보면서 피드백도 드려야 하고,

또 괜찮은 부분은 그에 맞춰서 우리가 바꿔야 하기 때문에 생각보다 회의를 오래 했다.

 

아래가 노션에 적어놓은 스크럼의 일부이다.

프로젝트 방향 회의

• 슬라이드부분 원래 인기있는 코스를 넣기로 했었는데 페이지 소개로 변경
• 검색기능 ‘제목 + 글내용’으로만 검색되도록 만들기로 했는데, 아래 내용으로 변경
  • 지역 선택 검색
  • 해시태그 선택 검색
  • 지역 + 해시태그 검색
  • 목적지 ( 제목 + 글내용 ) 검색
• 검색 창 밑에 해시태그별로 글 나타내는 부분, 아래 내용으로 변경
  • 인기있는 여행코스, 제일 최근 작성된여행
• 지금 바로 여행하러 가기 탭 추가사항으로 진짜진짜 마지막에 고려해보기

오늘 할 일

• UI 작업 진행
• 오늘 오후 스크럼 19시에 진행

 

 

처음에는 오전에 스크럼을 진행하고 말기로 했는데 생각해보니 하루의 마무리를 하는 것도 좋을 것 같아서 오후에도 스크럼을 하기로! 매일 아침 저녁으로 진행 상황을 서로 공유하고, 또 중간중간에 서로 물어보는 게 훨씬 좋다.

 

이번에는 소통이 너무 잘 되는 것 같아서 좋다. 아직 회의에 회의를 거듭하고 있긴 하지만 재밌게 기획하고 있다.

 

 

 

 

 

 

header, footer UI 구현

각자 맡은 UI 역할이 있는데 나는 header와 footer를 구현하기로 했다.

이번에는 내가 한번도 해본 적 없는 tailwind css를 이용해서 그런지 훨씬 시간이 오래걸렸다.

 

지금까지는 계속 styled-components를 이용해서 개발했었는데, tailwind 가 확실히 더 코드가 간결하기는 하다.

근데 써보질 않아서 그런가 className에 하나씩 적는 것도 너무 어색했었다.

다행히 선형님이 공유해주신 cheatsheet이 있어서 그걸 보면서 하나씩 적용해나갔다. (그래도 어려워....)

 

이 사이트가 tailwind 적용할 때 굉장히 도움이 많이 되었다.

https://tailwindcomponents.com/cheatsheet/

Tailwind CSS Cheat Sheet

 

근데 약간 적응하기 어려운 점은 className이 너무 길어서 뭐가 뭔지 잘 모르겠다는 것이다...ㅋㅋㅋㅋ

아직 익숙하지 않아서 그런걸 수도 있지만 하나하나 살펴보기는 간결한데 다같이 모이니까 구별하기도 어렵고 뭔가 수정하고 싶을 때 계속 하나씩 마우스 호버해서 보고 있다.

 

이번에 UI를 먼저 구현하는 게 처음인데 tailwind 적응하기에는 UI 먼저 구현이 맞는 것 같다.

나중에 기능이랑 같이 개발하려면....ㅎ 상상도 하기 싫다.

 

최종 프로젝트 시작하고 이틀 내내 기획만 했는데 오늘 오전에도 계속 기획하느라 바빴다. 그래서 정작 오늘 내로 끝냈어야 할 UI가 좀 늦게 끝났다. 심지어 중간중간에도 회의 엄청 했다. 역시 소통의 중요성...!!

 

ui라서 브랜치를 ui/header로 파서 작업했다.

(나중에 footer 작업하고 느낀 건 header 브랜치에 했다는 것...이미 했으니 어쩔수 없지만...쬐금 아쉽다.)

 

 

 

 

 

 

오후 스크럼

사실 오후 스크럼이라고 딱 정의하기는 애매한게, 물어보고 싶은 게 생기면 바로 마이크 키고 물어봐서....ㅋㅋㅋ

특강을 듣고 스크럼을 진행했는데, 어디까지 진행되었는지 서로 공유하고, 와이어프레임에서 이해되지 않은 것들을 서로 물어보기도 하면서 했다.

 

사실 오전에 디자이너님과 회의를 진행하면서 바뀌는 부분이 많아서 오전에 했던 걸 기억 못해서 다시 노션에 들어가서 기록한 걸 보기도 했었다.ㅋㅋㅋㅋ 역시 기록이 중요하다는 걸 깨닫는 하루였다.

 

 

오늘만 해도 바뀐 점이 여러개였다.

 

헤더

• 날씨 위젯 추가
• 닉네임 클릭시 드롭다운 메뉴 반환
  • 유저 페이지
  • 글쓰기
  • 로그아웃

메인페이지

UI

변경사항

• 처음 랜딩할 때 캐러셀 아닌 배너로 서비스 소개
• 섹션1 : 해시태그별 게시글 맵핑 이미지→ 최다 좋아요순 게시글(3X1)
• 섹션2: 지역별 게시글 → 해시태그별 최신글(4X2)

반응형

해시태그 및 게시글에 가로스크롤 적용

탑버튼 추가

메인, 상세, 유저 페이지에 모두 적용

검색 기능

Before

제목+내용 검색

After

기존의 검색 방식에 지역, 해시태그, 지역+해시태그 필터링 기능 추가

게시글페이지

소셜 공유 기능(카카오톡, 페이스북, 트위터, URL) 추가

푸터

Footer에 프로젝트 깃헙 링크, 정리 문서 추가

추가기능

• 메인페이지 - 숙박, 교통편 예약 바로가기 배너
• 다국어 지원 기능

 

 

이렇게가 오늘 최종 회의록에 기록된 변경 사항이다.

여기서 추가 기능은 시간이 있어야 하는 추가 기능이지만, 다른 것들도 많이 바뀌어서 UI에서부터 수정이 좀 필요했다.

사실 월요일부터 회의를 하느라 대화를 너무 많이 해서 그런지 훨씬 더 피곤한것 같다.

개인적 생각이지만 그냥 개발하는 것보다 기획이 더 힘든 것 같다....ㅋㅋㅋㅋㅋㅋ

 

 

 

 

 

 

오늘 구현한 UI

메인 페이지

header와 footer 사이에 아무것도 없어서 footer가 너무 위로 올라와 있지만 ㅋㅋㅋㅋㅋ

로그인/회원가입 버튼을 누르면 저런 식으로 로그인 모달이 나온다.

 

회원가입 버튼을 누르면 toggle 되면서 회원가입 모달이 나오는 걸로 바꿨다.

UI만 보면 그럴듯(?) 해보이는데 기능을 붙여서 해봐야지. 아직 저기 와이어프레임은 나오지 않아서 임의로 만들긴 했는데 크게 바뀌는 게 없을 듯 싶다. 아, 소셜 로그인 부분은 바뀔수도 있다.

 

캡처하니까 조금 사소해 보이지만...tailwind 로 하나하나 세팅하는게 생각보다 오래 걸리고 어려웠다.

하루 종일 공부했는데 아마 수정할 부분이 생겨서 UI를 변경할 때, 다시 공부하면서 해야할듯 싶다.

 

header와 footer 말고도 유저 페이지의 닉네임 부분을 맡아서 빠르게 구현했다.

유저 페이지

닉네임 변경 클릭시 나오는 input 창

이것도 모달로 구현할까 고민하다가 어차피 인풋창 하나밖에 없고 딱히 건드릴게 없으니까 토글로 구현했다.

 

 

 

 

 

 

 

 

 

짧은 일기

프로젝트 앞에 '최종' 이라는 두 글자만 붙었는데 왜 이렇게 오래 걸리고 기획이 어려운지 모르겠다 ㅋㅋㅋㅋ

마지막인 만큼 더 잘하려고 의욕이 생겨서 그런가, 그런데 이게 나만 그런게 아니라 우리 조 모두가 그래서 너무 다행이다.

혼자 의욕 넘쳤으면 조금 그랬을 텐데 다행히 우리 조 모두가 긍정적이고, 어렵지만 그래도 해야지, 이런 생각을 가지고 프로젝트를 하는 중이다. 그래서 더 재밌게 하고 있는 걸지도...?

 

아직 완벽하게 기획을 끝낸 것도 아니고, 기능을 다 한것도 아니고, UI만 만들었는데 하루가 다 가버렸다.

어제 TIL에서 기획만 하다 끝났다고 했는데 그래도 오늘은 UI까지는 해서 다행이다. 아직 PR 날리지는 않았지만...?ㅎㅎ

3주가 평소 프로젝트 하던 시간보다 길다고 생각했는데 생각이 바뀌었다. 지금 생각하면 짧은 것 같다. ㅋㅋㅋㅋ

내일도 오늘처럼만 열정을 가지고 임하고 싶다.