며칠 전 Discourse 메타에 표를 하나 만들어 보려 했는데 정말 고생했습니다. 빌더가 어떻게 작동하는지 확신이 없었고, 제가 본 것이 기대했던 것과 달랐기 때문에 기본 표를 추가한 뒤 거기서부터 커스터마이징을 시작했습니다.
조금 더 시간을 들여 대부분의 누락된 부분을 파악했으니, 이제 피드백을 공유해 보려고 합니다.
제 첫 표 빌더 경험
솔직히 말씀드리면, 표 빌더는 제가 기대했던 것보다 훨씬 더 고급진 기능들을 갖추고 있더군요 — 정말 훌륭한 작업을 해주셨네요. 표를 허용하는 대부분의 플랫폼은 빌더를 비교적 단순하게 유지하며, 원하는 행과 열의 수를 지정할 수 있는 빠른 방법만 제공합니다. 이는 따를 수 있는 패턴을 만들어 줍니다. 다만, 마크다운을 사용하는 플랫폼 중 표 빌더를 제공하는 곳은 많지 않더군요.
마크다운 문법에 익숙해지도록 기대하기보다 WYSIWYG(본문과 동일한 미리보기)에 가까운 경험을 제공하는 실제 빌더를 갖추고 있다는 점은 정말 좋습니다. 저는 능동적으로 마크다운으로 표를 수동으로 만들 수는 있지만, 미리보기 없이 이를 검토하는 것은 거의 불가능합니다.
불행히도, 저는 "열 5개, 행 10개의 표가 필요해"라고 지시하면 되리라 기대하며 도구를 사용하기 시작했는데… 기대했던 것과 달랐습니다. 대신 거의 빈 표가 있는 큰 흰색 페이지가 나타났습니다. 제가 무엇을 해야 하는지에 대한 정보가 즉시 눈에 띄지 않아서 약간 혼란스러웠습니다. 여기 있는 기능은 Google Docs에서 표를 삽입/편집하는 방식과 매우 유사하지만, 사용자에게 이를 암시하는 UI 요소가 많지 않습니다.
제가 처음 시도한 일은 “Column 1” 텍스트를 더블클릭하는 것이었습니다. 표 작업에서 항상 행/열 이름을 붙이는 것부터 시작하기 때문입니다. 하지만 아무 반응이 없었습니다. 텍스트는 선택할 수 있었지만 삭제는 되지 않았습니다. 표준 Discourse 포스트 작성기의 일반 텍스트 도구라는 마인드셋에 있었기 때문에 우클릭을 생각조차 하지 못했습니다.
개별 셀에 텍스트를 추가할 수 있다는 것은 발견했지만, 행과 열을 추가/삭제하는 부분에서는 여전히 혼란스러웠습니다. 여전히 단순한 도구에 프레임워크를 생성하라고 지시하고, 이후 표준 에디터에서 편집해야 한다는 마인드셋에 있었기 때문입니다.
마크다운 표를 만들 때 저에게 가장 큰 좌절감은 첫 두 줄의 코드(헤더와 수평 구분선)를 어떻게 설정해야 하는지 기억하는 것이기 때문에, 이 시점에서 “표 만들기” 버튼을 클릭하고 직접 편집했습니다.
오늘 다시 돌아온 이유는 제가 겪은 문제들이 버그인지, UI/UX 문제인지, 아니면 PEBKAC(Keyboard와 AC를 혼동한 사람, 즉 사용자 실수)인지 확실히 알 수 없어서였습니다. 버그를 보고하거나, UI 변경을 제안하거나, 또는 이렇게도 간단한 것을 놓치는 제가 얼마나 바보인지 알아내려 했습니다.
결국, 아마도 세 가지 모두의 조합인 것 같았습니다. 버그로 분류할 수 있는 몇 가지 사소한 문제들, 몇 가지 UI/UX 문제들, 그리고 오른쪽 하단의 "?"를 열거나 인지하지 못했다는 점에서 제 자신의 책임도 일부 있었습니다.
UI/UX 개선 아이디어
위에서 언급한 여러 가지 사항들이 이미 훌륭한 도구의 기능을 더 쉽게 발견할 수 있게 만들어 줄 것입니다. 빌더 사용법을 사용자가 이해하도록 돕는 것이 가장 큰 개선점이라고 생각합니다.
지침을 더 쉽게 발견할 수 있게 만들기
오른쪽 하단에 그물표(질문표) 아이콘이 있긴 하지만, 메인 페이지 콘텐츠에서 너무 멀리 떨어져 있어 놓치기 쉽습니다. 헤더 바로 옆과 같은 다른 위치에 있다면 도움말 아이콘을 훨씬 더 눈에 띄게 만들 수 있습니다. 사용자가 빌더를 처음 사용할 때 모달을 자동으로 열게 하고, 향후 방문 시 닫을 수 있는 옵션을 제공하는 것도 고려해 볼 수 있습니다. 또는, 실제로 도움말 메뉴에 있는 텍스트가 많지 않으므로 아예 숨길 필요가 있는지 고려해 보세요 — 표의 바로 위나 아래에 직접 표시하는 것이 더 나을 수 있습니다.
가시적이고 익숙한 UI 요소를 사용하여 기능 발견성 향상
특정 열로 정렬함을 나타내는 드롭다운 화살표가 이미 있습니다. 우클릭 메뉴에 숨기는 대신, 다른 기능들을 더 쉽게 찾을 수 있도록 이러한 방식을 더 활용하세요. 이는 빌더의 모바일 친화성도 높이는 데 도움이 됩니다.
- 헤더 셀에 편집 아이콘을 표시하여 텍스트 편집 기능을 더 쉽게 발견할 수 있게 하세요.
- 표의 가장자리에 + 아이콘을 사용하여 새 행/열을 빠르게 추가할 수 있게 하세요.
- 전체 행/열이 강조 표시되면, 행 위나 열 왼쪽에 휴지통 아이콘을 추가하여 삭제할 수 있음을 나타내세요.
저는 UI/UX 전문가가 아니므로 더 표준적인 옵션들이 더 있을 수 있지만, 이 목록이 여러분에게 몇 가지 아이디어를 줄 수 있기를 바랍니다. Google Docs의 표 빌더 작동 방식과 현재 구현된 방식 사이의 적절한 중간 지점을 찾는 것이, 도움말 텍스트 없이도 도구를 더 직관적으로 만들 것이라고 생각합니다.
에디터처럼 느끼게 만들기
마크다운 표는 사용 가능한 서식 옵션이 훨씬 제한적이라는 것을 알고 있지만, 페이지에는 이것이 에디터라는 표시가 전혀 없습니다. 행, 열을 추가하고 어떤 서식이 가능한지를 보여주는 막대를 제공하면 이 도구의 수준을 높이는 동시에 사용자가 이것이 무엇이고 무엇을 할 수 있는지 암시하는 데 도움이 될 것입니다. 현재 표에 텍스트 장식, 링크, 이미지 등을 추가하는 방법을 모르겠습니다. 모두 가능하지만 빌더에서는 할 수 없습니다.
몇 가지 사소한 버그
- 에디터 안의 첫 번째 열이 혼란스럽습니다. 행 헤더를 가질 수 있는 것처럼 느끼게 합니다. 이는 마크다운에서는 단순히 불가능합니다. 최종 표에 표시되지 않음을 명확히 하도록 조정하는 것을 고려해 보세요.
- 완성된 표 마크다운에는 첫 번째 열 셀의 텍스트 앞에 추가 공백이 없습니다. 표가 깨지지 않는 것 같지만, 일관성이 있기를 바랍니다.
- 완성된 표를 자동으로 새 줄에 배치하는 것을 고려해 보세요. 기존 텍스트 줄 위에 표를 만들면 깨진 것처럼 보입니다. 빈 줄을 위쪽에 강제 배치하여 새 줄에 두면 표가 항상 올바르게 작동합니다.
여기 두 번째와 세 번째 항목을 보여주는 스크린샷입니다.
