한국어 맞춤법/문법 검사기 리디자인

많은 분이 애용하는 부산대학교 인공지능 연구실에서 만든 한국어 맞춤법/문법 검사기, 저도 잘 사용하고 있습니다. 사전을 기반으로 한 단순한 맞춤법 교정이 아니라 문법 규칙과 의미 분석, 오류 통계를 통해서 문맥상의 오류나 번역 투의 문체 오류까지도 잡아내어 바른 표현을 알려줍니다. 강력한 검사 기능과 더불어 충실한 도움말을 제공하여 바른 우리말 사용을 배우는 데 많은 도움을 얻고 있습니다. 이 글을 쓰면서도 맞춤법 검사기를 이용했습니다.

하지만 UI 측면에서는 아쉬운 부분이 있습니다. 개선 사항을 수정해서 스스로는 만족스럽게 사용하고 있는데요. 이런 UI 개선점을 반영해 주셔서 다른 사용자도 같이 더 편하게 쓸 수 있으면 하는 바람으로 블로깅 합니다.

한국어 맞춤법/문법 검사기에 제안한 UI를 실제로 반영 하여 서비스 하고 있습니다. 고맙습니다.:)

1. 사용 흐름을 고려하여 정보를 공간에 펼쳐두기

부산대의 맞춤법 검사기뿐 아니라 기존의 상용 맞춤법 검사기들은 모두 공통으로 원본에 밑줄을 긋는 식으로 오류를 표시하고 별도의 창이나 팝업메뉴를 통해 대치어를 제안하는 구조입니다. 하나씩 선택하고 바꿔주는 작업 흐름이라 많이 번거롭습니다. 개정된 UI에서는 교정표에 오류를 모아두고는 있지만, 문맥을 확인하려면 결국 원문과 교정표를 왔다 갔다 시선 이동이 많습니다.

그림1. 한국어 맞춤법/문법 검사기

stacked in time vs. adjacent in space의 정보 표시 구조로 바라보면 현재 방식처럼 하나씩 살펴보는 것보다 공간에 펼쳐놓는 방식이 훨씬 바람직합니다. 종이에 적은 교정지가 원래 그랬습니다. 빨간 펜으로 잘못된 부분과 바꿔야 할 내용을 한 번에 보여줍니다.

그림2. 대치어를 원문에 같이 보이기 리디자인

온라인에서 기존보다 더 비효율적인 방식을 택했던 이유는 아마도 맞춤법 교정 기능을 주로 사용해 온 워드프로세서가 문서 스타일을 꾸미는 데 집중했기 때문이 아닌가 싶습니다. 문단의 꾸밈을 흐트러뜨리지 않고 교정 제안을 함께 표시하기가 어려우니 밑줄로 오류 표시만 한 것 같습니다.

원문에 바로 대치어를 표시해주면 문맥을 보면서 확인할 수 있어서 현재처럼 분리하여 표시하는 것보다 훨씬 자연스럽습니다. 이때 오류 문구 자체를 하이라이트로 강조하기보다 틀린 것은 오히려 덜 두드러지게 하고 옳은 표현을 강조해 보여주는 것이 좋습니다. 간단한 실수는 굳이 내가 뭘 틀렸는지 재확인하지 않아도 대치어만 보고 수정하면 되니 불필요한 인지를 줄여 보기 편합니다.

인터랙션 부분에서는 원문에서 교정 내용을 확인하고 클릭하면 바로 수정하도록 했습니다. 현재는 원문에서 틀린 부분을 클릭하면 교정표의 해당 항목으로 이동(스크롤)하긴 하지만 사실 이것도 번거롭습니다. 도움말을 보거나 대치어가 여러 개 있어 확인이 필요한 경우에 그냥 단어에 마우스를 올리면 해당 항목으로 자동 이동합니다.

같은 단어를 계속 틀리는 경우가 있는데요. 여러 번 등장하는 같은 오류는 한번 클릭으로 나머지도 한 번에 바꾸도록 했습니다. 똑 같은 걸 매번 다시 입력하게 하는 UI는 내 말을 못 알아듣거나 무시하는 것 같거든요. 회원 등록 양식에 이런 경우가 많은데 같은 거 또 적게 하면 막 화나잖아요.

이렇게 대치어를 원문에 함께 표시하여 사용 흐름을 바꾸는 것만으로 시선의 이동이나 마우스 조작이 현저히 줄어듭니다.

2. 사용자 대응 행위를 고려한 오류 컬러 코딩

오류 표시 색깔이 빨강, 파랑, 초록으로 달라서 사용하면서 무슨 차이가 있는지 항상 헷갈렸습니다. 보통 이렇게 연속적이지 않고 동떨어진 컬러 스킴을 사용하는 것은 의미가 다른 경우에 적용하는데요. 그래서 맞춤법이나 띄어쓰기 같은 오류의 유형에 따른 구분이라서 생각하였는데 도움말을 보니 확실히 틀린 건 빨간색, 규칙이나 문맥을 고려해서 찾은 오류는 녹색, 분석에 실패했지만 잘 못 사용한 것 같은 건 파란색으로 표시한다고 합니다.

결국, 유형이 다른 것이 아니라 사용 경험 측면에서는 오류 검출의 신뢰성이라는 한 가지 속성에 따른 구분입니다. 이렇게 한 가지 속성값의 차이를 구분하는 경우에는 연속적인 색을 사용하는 것이 좋습니다. 등고선 표시를 생각하면 쉽게 이해가 됩니다. 알록달록 색상을 자의적으로 대응하면 의미를 이해하기 어렵지만 연속된 명도나 채도 또는 근접 색상을 사용하면 관계를 쉽게 유추할 수 있습니다.

오류를 빨간색으로 표시하는 색상 대응은 익숙하니까 오류 신뢰도가 낮은 녹색과 파란색을 같은 계열인 주황색, 노란색 정도로 약하게 표시하는 게 자연스럽습니다. 빨간색도 간혹 틀리는 경우가 있고 녹색의 오류 검출 정확도도 높아서 둘의 차이가 잘 구분 되지 않았습니다. 그래서 둘 다 빨간색으로 하고 파란색만 한 단계 낮은 주황색으로 표시했습니다. 빨간색은 믿고 그냥 대치해도 되지만 주황색은 시스템이 틀렸을 수도 있으니 주의해야 하는구나 정도의 구분이면 충분한 것 같습니다.

그림3. 띄어 쓰기 교정 부호 사용과 컬러 코딩 개선 리디자인

정확한 정보를 주겠다고 정보의 단계를 많게 하는 것보다 사용자가 대응하는 행위 구분이 명확한 수준으로 단순화하는 게 더 유용합니다. 요즘 자동차의 연비를 계기반에 실시간으로 보여주는 기능을 많이 채용하고 있는데, 상세하게 알려주는 것보다 파란색, 초록색, 빨간색 정도로 단순화하는 게 오히려 인지 부담도 적고 반응 행위도 쉽게 대응할 수 있어서 운전자의 행동 변화를 유도하는 데 더 효과적입니다.

가장 빈번하게 틀리는 오류 유형이 띄어쓰기인데요. 이 정도는 바로 구분이 되면 좋겠습니다. 띄어쓰기나 붙여쓰기 같은 오류는 교정부호를 사용하고 교정부호에만 강조색을 사용하여 맞춤법이나 문법 오류와는 바로 구분되어 보이도록 했습니다. 문장 부호의 오류에도 같은 방법을 적용했습니다.

3. 정보가 드러나도록 장식 덜어내기

교정표의 테이블에는 정보 디자인에서 할 수 있는 다양한 실수가 총체적으로 모여있습니다. 정보를 강조하기 위해 정보 자체가 아닌 불필요한 다른 요소를 추가하는 잘못은 일반인뿐 아니라 디자이너도 많이 합니다. 불필요한 요소를 추가하여 강조하면 그보다 더 두드러지기 위해 더 불필요한 요소를 또 덧붙이는 악순환이 계속됩니다. 테이블의 선이나 배경색 같은 것은 실제 정보로부터 주의를 빼앗는 나쁜 잡음입니다. 정보를 강조하려면 이런 소모적으로 주의를 빼앗는 경쟁이 아니라 덜 중요한 정보를 내려두어야 합니다. 선보다는 여백과 정렬이 항목을 구분하는 데 더 효과적입니다.

그림4. 교정표 테이블 리디자인

이런 안 좋은 디자인이 계속 양산되는 이유는 엑셀 같은 스프레드시트 프로그램이 기본 제공하는 템플릿 디자인 자체가 나쁘기 때문입니다. 엑셀은 출력보다는 입력을 위한 도구라서 셀 구분 선이 필요하고 구분 선이 있으니 항목을 강조하기 위해 울긋불긋 과도한 배경색을 사용하게 되는 것 같습니다.

강조를 위해서 폰트의 크기나 굵기, 색상을 사용할 수 있는데 여러 요소를 섞어 사용하지 않도록 주의가 필요합니다. 한글은 획이 복잡해서 작은 크기에서 볼드를 사용하면 가독성이 떨어집니다. 문장 사이에서 강조하는 게 아니면 굵기보다는 크기를 키우는 게 효과적입니다.

입력 내용의 오류 색상과 대치어의 링크 색상이 색상이라는 한가지 속성으로 각각 강조하면 서로 충돌이 생겨 어느 곳으로도 주의가 가지 않습니다. 크기를 키워서 둘을 강조하되 더 중요한 대치어에 오류 컬러를 적용하는게 보기 편안합니다. 고만 고만한 애들이 서로 경쟁하게 하지 말고 정보의 위계를 분명하게 하여 시선의 흐름을 만들어 주어야 합니다.

거의 모든 경우에 테이블에서의 가운데 정렬은 좋은 선택이 아닙니다. 가운데 정렬은 정렬이 아니거든요. 될 수 있으면 글 선이 나란히 정렬되어야 읽기 수월합니다. 레이블은 매번 읽어야 하는 것이 아니니 잘 드러나지 않게 힘을 빼고 실제 정보의 열에 맞춰 오른쪽 정렬로 붙여두는 정도가 좋습니다.

4. 알림 팝업

알림과 경고를 구분하지 않고 잘 못 사용하는 경우가 많습니다. 수정된 내용을 클립보드에 복사하는 버튼을 누르면 복사가 완료되었다는 기본 경고 팝업이 뜹니다. 경고 팝업은 사용자가 알림을 인지하지 못하는 걸 방지하기 위해 명시적으로 확인 버튼을 누르기 전에는 다른 작업을 못하게 하는 modal dialog box를 사용하는 강력한 알림입니다.

복사 완료했다는 알림은 내가 한 번 더 클릭 해 줘야 할 정도로 중요한 알림이 아닙니다. 하지만 기본 제공하는 alert 명령이고 다른 버그에 비해 별로 심각한 문제도 아니라서 우선순위에서 밀리고 무관심 속에 남용되고 있습니다. 카카오톡에서 사진 저장했다고 경고를 띄우면 안 됩니다. 화가 나요. 1억 7000만 명의 사용자가 사진 저장하면서 매번 화를 낸다고요.

이벤트에 의한 알림도 아니고 사용자 자신이 의도를 가지고 한 행위에 대한 피드백은 자동으로 닫히는 토스트 알림 정도로 충분합니다. 움직이며 나타나는 토스트 팝업은 모바일이 아닌 큰 화면에서도 효과적입니다. 다른 곳을 보고 있어도, 주변시는 움직임에 민감하게 주의하므로 알림을 전달하기에 충분합니다.

프로토타이핑

UI 개선 사항을 테스트 해보기 위해서 css 스타일과 스크립트를 오버라이드하는 코드를 만들었습니다. 간단히 테스트해보려면 아래 북마클릿을 북마크바에 드래그하여 저장 후에 맞춤법 검사기 의 검사 결과 화면에서 실행해 주면 됩니다.

맞춤법 검사 리디자인 북마클릿

매번 실행 하기는 귀찮으니 크롬 확장으로 자동으로 코드를 삽입 하도록 하고 있습니다. 더 편한 방법은 맥용 오토메이션을 사용할 수 있습니다. 미남이 님이 만들어 공개해 주신 맥용 맞춤법 검사 오토메이션 웍플로우에 스크립트를 추가하도록 했습니다. 받아서 실행하고 서비스에 추가하면 글 선택 후 맥락메뉴에서 한국어 맞춤법 검사를 실행 할 수 있습니다.

추가 : 맞춤법 검사기에 UI가 이미 반영되어 북마클릿과 오토메이션은 정상 동작하지 않습니다. 본 사이트를 그냥 사용하시면 됩니다. :)

맞춤법 검사 오토메이션

궁극적으로는 이런 편법보다는 UI개선 제안점이 반영되어 모두가 더 편하게 사용하면 좋겠습니다. 제가 디자인 한 교정 내용을 함께 표시하는 맞춤법 검사 UI 는 CC로 공유합니다. 한국어 맞춤법/문법 검사기 뿐 아니라 영리 목적으로 사용해도 좋으니 한컴 한글이나 MS word나 구글 문서 어디든 보다 편한 한글 맞춤법 기능을 제공해주면 좋겠습니다. 요즘은 대부분의 글쓰기 작업이 클라우드로 넘어가고 있으니 구글 문서나 네이버, 다음의 블로그, 이메일 작성창에도 제대로 된 맞춤법 검사 기능이 들어가도록 노력해주면 좋겠습니다.

리디자인이 적용되었습니다.

한국어 맞춤법/문법 검사기에 리디자인이 정식으로 반영되어 서비스하고 있습니다.

또 얼마 전 다음 맞춤법 검사기에도 같은 디자인이 적용되었습니다.

고맙습니다.

한국어 맞춤법/문법 검사기 http://speller.cs.pusan.ac.kr

다음 맞춤법 검사기 http://alldic.daum.net/grammar_checker.do

교정 내용을 함께 표시하는 맞춤법 검사 UI by 無異 is licensed under a Creative Commons Attribution 4.0 International License.

[참고##정보디자인##]