잠금 파트 UI
이날은 두 프로젝트를 넘나들며 작업한 날이었다.
회사에서는 순차 수강 잠금 화면을 만들었다.
개인 도구에서는 폴백 플러그인 설정을 하나로 통합했다.
두 작업 모두 “암묵적인 걸 명시적으로 만드는” 방향이었다.
회사 교육 플랫폼에서 순차 수강 잠금 화면을 구현했다.
새 코스 종류에서 이전 파트를 완료해야 다음 파트가 열리는 기능이다.
잠긴 파트 화면에서 보여줄 게 네 가지 있었다.
완료율 표시, 잠금 라벨이랑 부제목, 잠긴 콘텐츠 어둡게 처리, 잠긴 섹션 아코디언 접기. 완료율은 학생이 이 파트를 얼마나 했는지 보여주는 거다.
잠금 라벨은 “이 파트는 잠겨 있습니다”라고 알리는 거다.
어둡게 처리는 잠긴 콘텐츠를 시각적으로 구분하는 거다.
아코디언 접기는 잠긴 섹션을 접어서 화면을 깔끔하게 만드는 거다.
요구사항 검증으로 빠진 걸 잡다
UI를 다
만들고 나서 요구사항 검증을 돌렸다.
완성된 구현이랑 원래 요구사항이랑 디자인을 비교해서 어긋나는 게 있는지 찾는 거다.
세 가지 문제가 잡혔다.
디자인 의도랑 구현이 어긋나는 부분이 있었다.
다행히 그날 다
수정했다.
이런 검증을 안 하면, 나중에 디자인 리뷰에서 다시 고치게 된다.
그러면 이미 배포된 코드를 다시 만져야 하니까 비용이 더 크다.
구현하고 바로 검증하는 게 가장 싸다.
잠금 UI가 까다로운 이유
잠금 UI가 생각보다 까다로운 이유는, 파트에 도달하는 경로가 여러 개라서다.
사이드바에서 클릭해서 들어올 수도 있고 이전이나 다음 버튼으로 넘어올 수도 있고 URL을 직접 입력해서 들어올 수도 있다.
이 모든 경로에서 잠금이 제대로 동작해야 한다.
하나라도 빠지면 잠긴 파트가 열려버린다.
그래서 백엔드에서 오는 잠금 필드를 프론트엔드에서 하나로 계산해서 모든 경로에서 같은 값을 쓰게 만든다.
경로마다 따로 처리하면 어긋날 수 있으니까.
이 잠금 모달은 나중에 공통 패키지로 승격됐다. 여러 앱에서 같은 잠금 모달을 쓰게 된 거다.
처음에는 한 앱에만 만들었는데, 재사용할 일이 생기니까 공통으로 빼는 게 맞았다.
폴백 플러그인 설정 스키마 통합
개인 도구 쪽에서는 폴백 플러그인 설정을 하나로 통합했다.
이전에는 설정이 여러 필드에 흩어져 있었다.
에이전트별 폴백, 대용량 컨텍스트 폴백, 기본 폴백이 각자 다른 곳에 있었다.
그러니까 사용자가 설정할 때 혼란스러웠다.
어디에 뭘 써야 하는지, 디폴트가 뭔지 헷갈렸다.
그래서 설정을 하나의 중첩된 스키마로 통합했다.
에이전트별 폴백, 대용량 컨텍스트 폴백, 기본 폴백을 명확하게 구분해서 담았다.
명시적인 타입으로
그리고 활성화 상태를 명시적인 타입으로 바꿨다.
이전에는 단순히 참 거짓으로 되어 있었다.
근데 이러면 “비활성화”랑 “설정 안 함”이 구분이 안 된다.
그래서 명시적인 활성화랑 비활성화 타입을 만들었다.
그리고 디폴트를 전부 비활성으로 통일했다.
뭔가를 켜려면 명시적으로 켜야 한다.
암묵적으로 켜지는 게 없게 만든 거다.
컨텍스트 예약 토큰 제거
그리고 컨텍스트 예약 토큰을 제거했다.
이 토큰은 컨텍스트의 일부를 예약해두는 용도였는데, 복잡도만 늘리고 이득이 적었다.
간단한 게 더 낫다.
임계점도 최적화했다.
컨텍스트가 일정 비율을 넘으면 큰 모델로 전환하는데, 이 임계값이 너무 예민해서 불필요한 전환이 일어나고 있었다.
임계값을 조정해서 너무 민감하게 반응하지 않게 만들었다.
마무리
두 작업 모두 “암묵적인 걸 명시적으로 만드는” 방향이었다.
잠금 UI에서는 잠금 상태를 명시적인 계산값으로 만들어서 모든 경로에서 같은 값을 쓰게 했다.
경로마다 따로 판단하면 어긋날 수 있으니까. 폴백 플러그인에서는 설정을 명시적인 스키마로 통합하고 디폴트를 명시적으로 비활성으로 잡았다.
암묵적으로 켜지는 게 없게 만든 거다.
명시적으로 만들면 혼란이 줄어든다.
설정이 어디 있는지, 디폴트가 뭔지, 켜져 있는지 꺼져 있는지가 명확해진다.
암묵적인 동작은 버그의 온대다.
명시적으로 만들면 그런 버그를 줄일 수 있다.