메모 검색을 넣고 나서 다크 모드가 다시 깨졌다

코딩은 AI에게 맡겼습니다 · 시즌 1 / 12

2026년 6월 27일에는 저장한 메모를 찾는 검색 기능을 추가하고 다크 테마를 다시 수정했습니다. 네 개 파일에서 154줄을 추가하고 19줄을 삭제했습니다. 검색창과 결과 안내가 추가되면서 기존 테마에서도 글자와 배경이 잘 구분되는지 다시 확인해야 했습니다.

먼저 보는 핵심
새 기능이 동작해도 기존 화면과 함께 사용할 때 문제가 생길 수 있습니다. 검색 결과가 없거나 제목이 긴 상황을 각 테마에서 확인하는 식으로, 기존 동작이 깨지지 않았는지 점검하는 회귀 테스트 목록을 변경할 때마다 갱신해야 합니다.


검색창 하나가 추가한 상태

검색은 입력창과 필터 함수만 있으면 되는 것처럼 보입니다. 실제 화면에는 적어도 다음 상태가 생깁니다.

  • 검색어가 비어 있는 기본 목록
  • 결과가 한 개 이상인 목록
  • 결과가 없는 빈 화면
  • 한글·영문·숫자·특수문자 검색
  • 제목과 본문 중 어디에서 일치했는지
  • 고정·정렬과 검색 결과의 관계

각 상태의 문구와 입력 내용은 밝은 테마와 어두운 테마 모두에서 읽기 쉬워야 합니다. 검색어 강조 색상이나 빈 결과 안내 문구는 기본 목록에 없던 새 디자인 요소입니다.


AI에게 정상 화면만 보여주지 않기

“검색 기능을 구현해줘”라는 요청만으로는 결과가 없거나 입력이 비정상적인 상황이 빠질 수 있습니다. 다음처럼 예외 상황과 확인 기준까지 구체적으로 적는 편이 좋습니다.

검색어가 없을 때 전체 목록을 보여준다.
공백만 입력하면 검색하지 않는다.
대소문자 차이를 무시한다.
HTML 태그가 아니라 사용자에게 보이는 텍스트를 검색한다.
결과가 없으면 다음 행동이 분명한 안내를 보여준다.
세 가지 테마에서 입력창, 결과, 강조 색상의 대비를 확인한다.

리치 텍스트 메모라면 저장된 HTML 문자열을 그대로 검색할 때 태그 이름이나 속성이 결과에 섞일 수 있습니다. 화면 텍스트 기준으로 정규화하는 과정이 필요합니다.


상태 조합표로 테스트 우선순위 정하기

모든 조합을 수동으로 확인하기 어렵다면 위험도가 높은 조합부터 고릅니다.

기능 반드시 함께 확인할 상태
검색 빈 결과, 긴 메모, 특수문자
테마 입력창 포커스, 선택 영역, 비활성 버튼
정렬 고정 메모, 검색 결과, 같은 날짜
저장 검색 중 편집, 패널 재열기

변경 코드와 함께 이 표를 갱신하면 새 기능을 추가할 때 다시 확인할 항목도 함께 남길 수 있습니다.


다음 편

검색까지 넣은 뒤 제품을 v1.1.0으로 크게 정리했습니다. 다음 편에서는 자동 저장이 있는데도 명시적인 저장 버튼을 다시 넣은 이유를 이야기합니다.

댓글

이 블로그의 인기 게시물

React에서 Socket.IO Client 연결하기: CORS와 useEffect 정리

Xamarin WebView 예제를 .NET MAUI로 다시 만들기

Android Koin 적용하기: Compose와 ViewModel 의존성 주입