멋쟁이사자차럼 4기에서 배운 내용을 토대로 마지막 react프로젝트를 마치고 4개월간의 FE스쿨이 끝났다. 4개월의 스쿨동안 교류가 전혀없는 동기분들과 한팀이 되어 최종 프로젝트(3.9 ~ 3.28)를 진행하게 되었는데 정말 좋은 분들로 열정이 대단하셨고 팀원끼리 의사소통이 활발해서 원했던 결과를 잘 보여준거같다.
1. 프로젝트 주제 선정
프로젝트 주제를 선정할때 전체적인 큰 틀을 나누어 보자면
- Vanilla JavaScript 프로젝트때 했던 마켓칼리와 타잉 시안
- 자율적인 주제(자체적인 기획, 디자인 시안제작 필요)
이렇게 팀원들과 논의를 통해서 정할수있는데 우리팀원분들은 전부 자율적인 주제(기획)로 딱 맞아서 기획을 하기로 했다. 큰 틀은 기획으로 잡혔고 매일 스크럼때 마다 각자 하고싶은 기획들의 주제를 제시했고 의논끝에 OpenAPI를 활용한 서울시 어린이집 정보를 쉽게 볼 수 있는 서비스를 만들기로 하였다.
2. 마크업 디자인
서울시 어린이집 정보를 보여주는 주제로써 어떤식으로 디자인을해서 나아가야할까 대화를 많이 하다가 "아이들나라"라는 사이트의 디자인을 참고하면서 우리만의 스타일로 조금씩 변형하기로 했고, 각자 하고싶은 페이지 부분을 나눠서 마크업 데드라인을 정해 그 기간안에 마크업 및 반응형 디자인까지 완성하는 계획으로 진행했다. 그리고 tailwind를 이용해서 스타일을 적용했는데 처음 써보는 프레임워크였지만 적응하기 어렵지않았다. css파일과 클래스명을 고민하지 않아도 되서 좋았고 다만 코드를 보면 지저분해 보이는 부분은 어쩔수없는 부분이였다.
3. 기능구현
내가 맡은 페이지는 서울시 어린이집 정보 api를 받아와서 어린이집 리스트를 뿌려주고 해당 어린이집 리스트를 클릭하면 정보 모달창이 나오고, kakao map api를 활용해서 어린이집 리스트에서 좌표아이콘을 클릭하면 지도에 해당 어린이집 위치를 찍어주는 map 페이지부분을 담당했다. 아쉬웠던 부분은 어린이집 리스트를 1000개 한정으로만 받아와서 뿌려주는데 이 부분에서 무한스크롤 적용을 하고싶어서 시도를 했지만 잘 되지않아서 아쉬웠던 부분이였다. 결국 react-paginate로 적용했다.
4. 문서작성
기획 디자인 템플릿, Daily Scrum 및 회의 등의 기록을 먼저 Notion에 적어두고 나중에 정리해서 github wiki에 옮기는 식으로 진행하였다.
👉 우동집 github
5. Feedback
4/11일에 슬비쌤에게 웹 접근성 멘토링 신청을 해서 피드백을 받은 결과로써 피드백 내용을 토대로 리팩토링을 진행할 예정이다.
1) 메인 페이지
- 비디오는 ESC키를 누르면 정지하도록 하는 기능을 추가하면 좋을 것 같음
- 대체텍스트 우동집, 아이들나라 로고 로고라는 말은 제외
- 이미지 요소에 alt 속성이 없는 경우 있음 (라이트 하우스 결과)
- 애기사진1 보다 어떤 상황에 찍은 사진인지 자세하게 대체텍스트로 제공해야 함
ex)운동회에서 달리기 시합을하고있는 아이들
2) 회원가입 및 로그인 페이지
- 입력서식에 레이블 미제공 (label 연결)
- 회원가입도 로그인 재사용하기
- 비밀번호 alt 버튼 텍스트 지우고 비밀번호 보기 감추기 이런식으로 텍스트 변경
=> 패스워드 타입을 텍스트 타입으로 바꿔야함
3) 어린이집 정보 페이지
- 모달창 닫기 버튼에 키보드 접근 불가능
4) 커뮤니티 페이지
- 초록색 글자 색상이 명도대비가 불충분 (1.7 : 1)
5) About Us 페이지
- a태그 안에 span <> 이런요소들 스크린리더가 다 읽기 때문에
=> aria-hidden:true를 줘서 감춰주기 - 링크의 목적지를 aria-label을 사용해 이해할 수 있도록 제공했더라면 하는 아쉬움
🔎 우동집 배포 링크
✅ 테스트 로그인 정보
▶️ ID : user@test.com
▶️ PW : user1!
