Inline editing, Click-to-edit, 인플레이스 편집 패턴

Inline editing

별도 편집 화면이나 모달 없이 콘텐츠를 그 자리에서 바로 편집합니다. 2000년대 후반 Web 2.0 시대에 표준화됐습니다.

대표 사례:

• Google Docs: 모든 텍스트가 클릭 즉시 편집 가능합니다.
• Notion: 모든 블록 인라인 편집됩니다.
• Airtable: 셀 클릭 즉시 편집됩니다.

Click-to-edit

평소엔 정적 텍스트로 보이다가 클릭하면 input 필드로 변신합니다. Inline editing의 한 형태입니다.

const [editing, setEditing] = useState(false);
return editing
  ? <input value={text} onChange={...} onBlur={() => setEditing(false)} />
  : <span onClick={() => setEditing(true)}>{text}</span>;

자동 저장 결합

Inline editing은 보통 자동 저장과 짝입니다. "저장" 버튼이 사라집니다.

흐름:

1. 사용자가 텍스트 클릭.
2. 편집 모드 진입.
3. 입력하면 자동으로 서버 저장 (debounce 300ms).
4. blur 시 정적 상태로 복귀.

함정

• 실수 보호 부족: 자동 저장이라 실수가 즉시 반영됩니다. Undo 필수입니다.
• 상태 표시 약함: 저장 중·저장 완료를 사용자가 모릅니다. "저장됨" 작은 indicator 표시가 필요합니다.
• 선택 어려움: 클릭이 편집 시작이면 텍스트 선택이 어렵습니다. 더블 클릭으로 편집을 권장합니다.

사용자 모델 변화

전통적:

• "편집" 버튼 클릭, 새 화면, 수정, 저장, 원래 화면.

Inline:

• 텍스트 클릭, 즉시 편집, blur, 자동 저장.

후자가 압도적으로 빠르고 직관적입니다. 모던 도구의 표준입니다.

바이브 메이커가 챙길 한 가지

본인 도구의 작은 정보(제목, 메모, 라벨) 편집은 inline editing이 거의 항상 더 좋습니다. 모달이나 별도 페이지를 강제하지 마세요.

관련

Save Open · Optimistic UI · Microinteraction