회고
[우테코] 14편 : 오픈미션 8일차
| 서론
안녕하세요 팡일입니다!
오늘은 우아한테크코스 8기 프리코스의 오픈미션 8일차 포스팅입니다. 오늘은 진행한 점들에 대해서 기록하고 공유하려고 합니다!
| 오늘 한 일
이전/이후 버튼 추가
작성 완료 버튼을 모바일과 데스크탑마다 상이하게 배치
회고 작성 페이지에서 tab 누르면 textarea로 이동하게 수정
| 어려웠던 점
1) 기능 추가가 낳은 또 다른 복잡성
: 처음에는 단순히 글쓰기 섹션 간 이동을 편하게 하려고 '이전/다음' 버튼을 추가했습니다. 하지만 이 간단한 기능 하나가 '데스크탑에서는 세로 스크롤, 모바일에서는 가로 스크롤'이라는 복잡한 요구사항으로 이어졌습니다. 브라우저의 scroll 동작을 직접 제어하고, 화면 크기에 따라 다른 로직을 실행하게 만들면서 코드가 처음 생각했던 것보다 훨씬 복잡해지는 것을 경험했습니다.
2) 반복되는 코드, 어떻게 중앙화할 것인가?
: 모바일 화면을 감지하는 로직(window.innerWidth < 640)이 여러 컴포넌트 파일에 중복해서 나타나기 시작했습니다. 이 중복을 해결하기 위해 '어떻게' 코드를 중앙화할지 결정해야 했습니다. 단순히 공통 함수로 만들 수도 있었지만, 화면 크기가 바뀔 때마다 모든 컴포넌트가 실시간으로 알아야 했기 때문에, 반응성(Reactivity)을 가진 Svelte 스토어를 도입하는 것이 최선이라고 판단했습니다. 이처럼 문제에 맞는 최적의 기술을 선택하고 적용하는 과정이 쉽지 않았습니다.
3) 일관성 없는 사용자 경험(UX)의 발견
: 새로 추가한 기능에 세련된 토스트(Toast) 알림을 적용하고 나니, 애플리케이션의 다른 부분에서는 여전히 투박한 alert() 창이 뜨는 것이 눈에 띄었습니다. 이는 전체적인 사용자 경험의 일관성을 해치는 문제였습니다. 결국 "이왕 고치는 김에 전부 다 고치자" 라고 결심했고, 하나의 페이지를 개선하려던 작업이 애플리케이션 전체의 alert()를 찾아 toast로 교체하는 더 큰 작업으로 확장되었습니다. 작업 범위가 예상보다 커지는 것에 대한 부담이 있었습니다.
| 배운 점
1) 점진적 리팩토링의 힘
: "기능 추가 → 문제 발견 → 코드 개선" 의 사이클을 하루 동안 여러 번 경험했습니다. 섹션 이동 기능을 만들고 나니 모바일 감지 코드가 중복되는 문제가 보였고, 이를 스토어로 해결했습니다. 또, 알림 방식을 개선하다 보니 기존 alert()의 문제점이 보여 전체를 toast로 바꿨습니다. 이처럼 한 번에 완벽한 코드를 짜기보다, 기능을 만들고 점진적으로 코드를 다듬어 나가는 방식이 훨씬 안정적이고 효과적이라는 것을 몸소 체감했습니다.
2) 상태(State)는 한 곳에서 관리해야 한다
: isMobile이라는 상태를 스토어로 중앙화하면서 얻은 이점은 명확했습니다. 이전에는 각 컴포넌트가 개별적으로 "지금 모바일인가?"를 계속 확인해야 했지만, 이제는 모든 컴포넌트가 중앙 관제소(스토어)의 정보만 구독하면 되었습니다. 덕분에 화면 크기가 변경될 때 오직 한 곳의 코드만 실행되면 되고, 관련된 모든 UI가 알아서 반응하게 되었습니다. "데이터는 한 곳에서 관리하고, 나머지는 그 데이터를 바라보게 하라"는 원칙의 중요성을 깨달았습니다.
3) 좋은 UX는 사용자의 흐름을 막지 않는다
: alert()는 사용자의 모든 행동을 멈추게 하지만, toast 알림은 메시지를 전달하면서도 다른 작업을 계속할 수 있게 해줍니다. 이 경험을 통해 "좋은 피드백은 사용자의 흐름을 방해하지 않아야 한다" 는 것을 명확히 배웠습니다. 특히 비동기 작업의 성공/실패를 알려줄 때, 사용자를 기다리게 하거나 흐름을 끊는 방식은 피해야 한다는 것을 알게 되었습니다. 중간에 토스트 타입을 error에서 success로 수정한 작은 커밋 또한, 사용자에게 '정확한' 피드백을 주는 것의 중요성을 보여준 좋은 경험이었습니다.
| 내일 목표
1) Write 페이지
감정 버튼 기능 추가
임시 저장 기능 추가
2) 고민할 부분
우리 프로젝트에서 단위 테스트는 어떻게?
모니터링 도구 알아보기
3) Update 페이지
기본 UI 구성
조회 기능 추가
수정 기능 추가
4) 로그인/회원가입 페이지
구글 로그인 아이콘으로 커스텀
5) Detail 페이지
수정 페이지 이동 기능 추가
6) 랜딩 페이지
후킹할만한 포인트 고민하기
7) 리팩토링
코드 개선 필요한 부분 찾고 개선하기
감정 칩 추가로 인한 변경 사항 고민하기
| 한 줄 회고
: "속도가 더디지만 꾸준히 해보자!"