글자 크기와 색상 기능이 생각보다 어려웠던 이유
코딩은 AI에게 맡겼습니다 · 시즌 1 / 10 리치 텍스트 편집기 도입 일주일 뒤에는 글자 크기와 색상 조절 기능을 추가했습니다. 네 개 파일에서 254줄을 추가하고 67줄을 삭제했습니다. 버튼 두 개가 늘어난 것처럼 보이지만 편집 상태와 화면 상태를 함께 다뤄야 했습니다. 먼저 보는 핵심 편집 기능은 버튼을 화면에 놓는 것으로 끝나지 않습니다. 선택 영역, 현재 서식, 저장된 HTML, 테마 대비, 키보드 접근성과 초기값이 하나의 동작으로 이어져야 합니다. AI에게 UI 모양보다 상태 전환을 먼저 설명하게 하세요. 사용자가 보는 버튼과 내부 상태 사용자는 글자를 선택하고 크기나 색상을 누릅니다. 내부에서는 다음과 같은 경우를 구분해야 합니다. 선택 영역이 있는가, 커서만 있는가 선택한 여러 글자에 서로 다른 서식이 있는가 새로 입력할 글자에만 서식을 적용할 것인가 편집기를 다시 열었을 때 툴바가 현재 위치의 서식을 표시하는가 다크 테마에서 선택한 색상이 읽히는가 AI는 편집기 API를 호출하는 코드를 빠르게 만들었습니다. 하지만 사용자가 어떤 상태를 보고 있다고 느껴야 하는지는 별도 결정이었습니다. 색상 선택이 만드는 접근성 문제 색상 팔레트를 많이 제공하면 자유도가 높아 보입니다. 그러나 밝은 배경과 어두운 배경에서 모두 읽히는 색은 제한적입니다. 사용자가 직접 지정한 색이 테마 전환 뒤 보이지 않을 수도 있습니다. 확인 항목은 다음과 같습니다. 항목 질문 대비 밝은·어두운 테마에서 읽을 수 있는가 표시 현재 선택 색상을 색상 이름 없이도 구분하는가 키보드 마우스 없이 팔레트를 열고 선택할 수 있는가 초기화 기본 색상으로 쉽게 돌아갈 수 있는가 내보내기 지정 색상이 HTML 파일에 보존되는가 기능을 추가할 때마다 테스트 조합이 늘어납니다. 테마 3개와 글자색 8개만 있어도 24가지 조합이 됩니다. AI에게 상태표를 먼저 요청했다 UI 코드를 바로 만들기 전...