유대선
프로젝트로
·기술 회고·3

모바일 다크 입력창과 눌림 피드백 — 터치가 보이게

지정된 12개 입력창을 theme 색으로 바꾸고, Track D 허용 화면의 Pressable 49개에 공용 opacity와 Android ripple을 연결했다.

문제

login, signup, settings, import, compose, videos 검색 입력은 text와 surface 색을 밝은 값으로 고정했다. 시스템을 dark appearance로 바꿔도 입력칸만 흰 상자로 남을 수 있었다. 같은 Track D 화면과 컴포넌트의 Pressable에는 pressed style이 없어 탭이 시작됐다는 시각 신호도 없었다.

바꾼 경계

검증

정적 TSX 검사 결과는 다음과 같았다.

pressables=49 formTextInputs=12 issues=0

iPhone 17 Pro Max Simulator를 xcrun simctl ui ... appearance dark로 전환했고 명령 결과는 dark였다. login, signup, settings, import, compose, videos의 Clips 검색 화면을 열어 지정 입력들이 어두운 theme surface로 렌더링되고 흰 입력 상자가 남지 않는 것을 확인했다. 검증 뒤 appearance는 light로 복구했다.

iOS 자동 클릭은 press가 끝난 뒤 캡처되므로 login 링크에 RN의 testOnly_pressed를 임시로 적용해 pressed=true 분기를 렌더링했다. 링크 행의 opacity가 낮아지는 것을 화면에서 확인한 뒤 테스트 prop을 제거했다. Android ripple의 실제 프레임과 손가락 터치 체감은 [unverified]다.

npx tsc --noEmit --pretty false도 exit 0으로 끝났다. Windows 개발 호스트와 Android 기기 실행은 [unverified]다.

Commit: Track D L6 commit (immutable hash is in git history).

패턴

테마 입력은 본문 글자만 바꾸면 끝나지 않는다. surface, border, placeholder, selection 색까지 한 theme source에서 가져와야 한다. Pressable은 iOS를 포함한 공통 opacity callback을 기본 피드백으로 두고, Android ripple은 그 위에 플랫폼 피드백으로 더한다.