JLPT 학습관 문제 풀이 화면 개선하기

가나를 익힐 때도 그랬지만, N5를 공부하면서도 데스크톱 브라우저보다 출퇴근길에 모바일로 학습하는 날이 더 많았다. 콘텐츠는 주로 주말에 집에서 데스크톱으로 확인하며 만들었으니, 모바일에서 어떻게 보이는지는 직접 공부하면서야 알게 됐다.

사실 가나 학습관을 고칠 때도 같은 일을 겪었다. 넓은 화면에서 만든 창과 카드가 모바일에서는 화면을 거의 덮거나 어색하게 떠 있어서, 하나씩 다시 손봤었다. 그걸 겪고도 N5를 만들면서 또 데스크톱 화면만 보고 만들었으니, 같은 실수를 한 번 더 한 것이다.

이번에도 모바일로 공부하다 보니 만들 때는 몰랐던 불편한 점들이 하나둘 보였다. 특히 문제 풀이에서는 답을 고른 바로 다음이 그랬다. 정답이 어디에 나오는지, 다음 문제로 어떻게 넘어가는지, 틀렸으면 무엇을 보여 주는지 같은 것들이었다.

정답과 다음 버튼을 나눈 이유

정답을 다음 버튼 안에 넣은 건 가나 연습 화면을 처음 만들 때부터였다. 그때 정한 것은 「틀리면 정답을 보여 주고 멈춘다」였다. 틀렸는데 곧장 다음 문제로 넘어가면 정답을 못 본 채 지나가기 때문이다. 정답을 보여 주는 곳이 곧 다음으로 넘어가는 버튼이라, 1~4로 고르고 스페이스로 넘기면 키보드만으로 문제를 풀 수 있었다. 「ki → き」처럼 짧은 가나에서는 이 모양이 자연스러웠다.

그 화면을 문법과 단어 문제가 같이 쓰게 되면서 버튼 안이 무거워졌다. 완성된 문장이 들어가고, 그 아래 뜻이 들어가고, 맨 아래에 「space 로 계속」이 붙었다. 이 버튼이 하는 일은 처음부터 다음 문제로 넘어가는 것 하나였는데, 그 안에 정답과 뜻까지 담기면서 생김새는 해설을 읽는 상자가 되어 버렸다. 하는 일과 보이는 모습의 균형이 깨진 것처럼 느껴졌다. 모바일로 보니 그 불균형이 더 크게 느껴졌다. 좁은 화면에서는 문장과 뜻이 여러 줄로 접히면서 버튼이 점점 커졌고, 다음 문제로 넘어가는 버튼이라기보다는 글을 읽는 영역에 더 가까워 보였다.

클로드에게 정답은 그냥 보여 주기만 하고, 다음 버튼은 따로 두자고 했다. 그렇게 나누고 나니 이번에는 테두리가 문제였다. 테두리 친 보기 버튼 넷 아래에 테두리 친 정답 상자, 그 아래에 또 테두리 친 다음 버튼. 선이 세 겹으로 쌓이니 화면이 어딘가 어수선했고, 누르는 버튼과 읽는 설명 영역의 경계가 흐려지는 것 같았다.

테두리는 누르는 곳에만

클로드가 처음 내놓은 안은 정답 상자의 테두리를 빼고 옅은 배경색을 까는 것, 다음 버튼은 테두리를 없애고 양 끝이 둥근 옅은 버튼으로 바꾸는 것이었다. 크루 달력을 다듬을 때 「상자에 묶이지 않은 버튼은 테두리 없이 옅은 색만 칠한다」라고 정해 둔 것을 그대로 따른 것이다.

그런데 이번에는 다른 쪽이 어색했다. 앞에서는 테두리가 세 겹으로 쌓인 게 문제였다면, 이번에는 화면 아래쪽에서 옅게 칠한 정답 상자와 다음 버튼, 두 면이 위아래로 겹쳐 보였다. 다음 버튼은 문제를 풀 때마다 누르는 버튼인데, 옅은 면들 사이에 섞여 있으니 눈에 잘 띄지 않았다.

그래서 방향을 바꿨다. 다음 버튼은 보기 버튼과 같은 둥근 사각으로 만들어, 이 화면에서 누르는 것들이 모두 같은 모양을 하도록 맞췄다. 거기에 색을 꽉 채워서, 문제를 풀 때마다 누르는 버튼이 어디 있는지 바로 보이게 했다. 정답은 배경 없이 글로만 두고, 보기와 정답 사이에는 선을 하나 그었다. 이 화면에서 손으로 누르는 것은 보기 버튼과 다음 버튼 둘뿐이라, 상자 모양도 그 둘에만 남기고 나머지는 선과 글만으로 나눴다.

답을 골라도 보기가 움직이지 않게

가나 연습 화면에서는 보기 아래에 정답 버튼이 들어올 높이만큼 자리를 미리 비워 두었다. 가나는 답이 짧아서, 그 자리만 잡아 두면 틀려서 정답이 나타나도 보기는 움직이지 않았다. 그런데 문법과 단어 문제에서는 정답 아래에 뜻과 해설이 붙으면서 정답 영역이 몇 줄씩 길어졌다. 비워 둔 자리로는 모자라서, 답을 고르는 순간 화면이 크게 밀려 올라갔다.

그래서 정답을 아예 문제 바로 아래로 옮겼다. 문제 글자 아래에는 원래 빈 공간이 있어서, 정답과 해설이 거기 들어와도 보기는 제자리에 있다. 단어를 처음 배우는 화면도 단어 바로 아래에 뜻을 보여 주니, 이 배치도 낯설지 않다.

다음 버튼은 눌리지 않는 상태로 미리 띄워 두면 어떨까 했는데, 클로드가 가나 학습관을 고칠 때 정해 둔 「할 수 없는 일은 버튼으로 내놓지 않는다」라는 규칙을 짚었고, 나도 수긍했다. 그래서 버튼 높이만큼 자리만 잡아 두고, 답을 고르면 그 자리에 버튼이 나타나게 했다. 이렇게 하니 답을 골라도 보기가 제자리를 지켜서, 한 문제를 풀고 다음 문제로 넘어가는 흐름이 훨씬 매끄러워졌다.

정답 아래에 붙는 해설도 손봤다. 처음에는 해설도 가운데 정렬이라, 설명이 길어지면 줄마다 시작하는 자리가 달라 읽기 힘들었다. 클로드는 해설을 왼쪽 정렬로 바꾸자고 했는데, 가운데 놓인 정답 아래로 해설만 왼쪽에 덩그러니 붙을 것 같았다. 그래서 해설 영역의 폭을 줄여 가운데에 두고, 그 안의 글만 왼쪽으로 맞추자고 했다.

오답 해설 만들기

틀리면 정답은 보여 줬지만, 내가 고른 보기가 무엇이었는지는 알려 주지 않았다. 틀렸을 때 왜 틀렸는지도 알려 주면 좋겠다고 했더니, 클로드가 문제 종류마다 일의 크기가 다르다고 했다.

단어·한자 문제의 오답은 지어낸 것이 아니라 다른 단어의 뜻이나 읽기라서, 고른 보기가 실제로 무엇인지는 바로 알려 줄 수 있다. 「たべる」의 뜻을 묻는데 「마시다」를 골랐다면 「『마시다』는 のむ의 뜻이에요」처럼. 반면 문법 문제는 「이 조사는 왜 안 되는지」를 오답마다 사람이 써야 한다. 빈칸 문제만 222개라 설명이 600개 넘게 필요하다. 그래서 문법은 뒤로 미루고 단어·한자·가나부터 넣었다.

한자 쪽 문장은 한 번 고쳤다. 처음에는 「九는 きゅう로 읽어요」였는데, 九는 く로도 읽는다고 한다. 읽는 법이 하나뿐인 것처럼 들려서 「九는 きゅう의 표기예요」로 바꿨다. 틀렸을 때는 정답 옆에 듣기 버튼도 붙였다.

맞힌 문제에서도 멈추는 이유

단어 문제를 맞혀도 멈추게 한 건 얼마 전이었다. 짐작으로 맞혔더라도 「わたし → 저 · 나」처럼 답을 한 번은 보고 넘어가는 편이 낫겠다고 했었다. 그 무렵에는 정답이 다음 버튼 안에 「문제 → 정답」으로 짝지어 나와서, 멈췄을 때 문제와 답을 한 번에 볼 수 있었다.

그런데 정답이 문제 바로 아래로 오자 이야기가 달라졌다. 문제가 바로 위에 있으니 답만 적게 됐고, 「어른」 아래에 「おとな」를 한 번 더 적는 꼴이 됐다. 방금 고른 보기와 같은 글자다.

그래서 덧붙일 설명이 있는 단어만 멈추고, 나머지는 가나 문제처럼 맞히면 바로 넘어가게 했다. 써 보니 이게 더 어색했다. 어떤 단어는 넘어가고 어떤 단어는 서니 흐름이 들쭉날쭉했는데, 덕분에 매번 똑같이 멈추는 쪽이 오히려 마음 편히 다음 문제로 넘어갈 수 있다는 걸 알게 됐다.

결국 단어·한자 문제는 맞혀도 늘 멈추게 원래대로 돌리고, 대신 멈출 때마다 볼 것을 두기로 했다. 정답 듣기 버튼은 맞혔을 때도 보여 주고, 한자 표기가 있는 단어는 「한자: 大人」처럼 표기를 같이 보여 준다. 한자 읽기 문제는 그 단어의 뜻을 보여 준다. 「来月」를 「らいげつ」로 맞히면 아래에 「다음 달」이 나오는 식이다. 단어 671개는 모두 음성이 있어서, 어느 단어에서 멈춰도 들어 볼 것이 있다.

대화 문제는 두 줄로, 해석도 두 줄로

묻고 답하는 빈칸 문제는 「いま __ ですか。 ごぜん くじ です。」처럼 묻는 말과 대답이 한 줄에 이어 적혀 있었다. 화면에도 그대로 한 줄로 나오다 보니, 한 사람이 묻고 혼자 답하는 것처럼 읽혔다. 그래서 말하는 사람마다 A「…」, B「…」 두 줄로 나눠 냈다.

문장 만들기 문제는 원래부터 대화였다. 실제 시험에서도 이 유형을 대화로 낸다고 해서 그대로 따랐다. 그런데 뜻은 내가 만든 줄 하나에만 달려 있었다. 뜻 칸을 「완성된 문장의 뜻」으로 정해 둔 탓에 상대의 줄에는 해석이 없었다.

그래서 대화로 내는 17문항에 상대 줄의 뜻을 모두 넣었다. 이제는 두 줄 모두 해석이 나온다.

줄이 넘어갈 때 둘째 줄이 A 밑에서 시작하지 않도록, 「 다음 글자에 맞춰 내어 쓰는 것도 챙겼다.

실제 시험에서는 대화 문제를 어떻게 내는지 클로드에게 물었더니, JLPT 공식 모의시험을 찾아보고 알려 줬다. A「…」, B「…」처럼 말하는 사람마다 줄을 나누는 것은 물론이고, 대답을 받아 주는 셋째 줄이나 「(びょういんで)」 같은 장면을 먼저 적기도 했다. 문법 빈칸 문제 열여섯 개 가운데 여섯 개가 이런 대화였다.

우리 문항은 그 모양을 따라가지 못하고 있었다. 빈칸 문제 222개 가운데 대화는 10개뿐이었고, 그마저 한 줄을 잘라 두 줄로 내는 방식이라 셋째 줄도 장면도 담을 수 없었다. 그래서 말하는 사람마다 줄을 따로 담도록 문항을 바꾸고, 문법 항목마다 대화 문제를 하나씩 더 써서 63개로 늘렸다. 세 줄 대화와 장면이 붙은 문제도 넣었다.

작은 차이지만, 이제는 실제 시험에서 만날 대화 문제와 같은 모양으로 연습하고, 두 사람의 말이 무슨 뜻인지까지 확인할 수 있다.

공부하면서 고치는 재미

이번에 고친 모양들은 처음 만들 때 다 그렇게 한 까닭이 있었다. 가나처럼 짧은 답을 생각했거나, 다른 화면에서 정한 규칙을 따랐다. 모바일로 학습하면서 그 이유가 더는 맞지 않는 곳이 보였고, 그런 곳을 하나씩 다듬어 갔다.

돌아보면 이 과정이 재미있었다. 문제를 풀다가 걸리는 곳이 생기면 클로드에게 말하고, 고친 화면으로 다시 문제를 풀었다. 고친 결과를 다음 공부에서 바로 써 볼 수 있으니, 만드는 일과 배우는 일이 따로 떨어져 있지 않았다. 불편한 곳을 찾는 것도 공부의 일부처럼 느껴졌다.

고친 것들은 공부에도 도움이 됐다. 맞힌 단어에서도 멈추게 한 뒤로는 문제 하나를 지나가는 모습이 달라졌다. 전에는 보기를 고르면 바로 다음 문제였는데, 지금은 멈췄을 때 듣기 버튼을 눌러 소리를 들어 보고 넘어가기도 한다. 짐작으로 맞힌 단어일수록 이 한 번이 도움이 됐다. 한자 표기도 같이 나오니, 단어를 가나로 익히면서 한자까지 함께 보게 됐다. 「おとな」를 맞히면 그 아래에 「한자: 大人」가 나오는 식이라, 한자를 따로 찾아보지 않아도 단어와 한자를 한 번에 익힐 수 있다.

틀린 문제도 그냥 지나가지 않게 됐다. 「たべる」의 뜻을 묻는데 「마시다」를 고르면, 정답과 함께 「『마시다』는 のむ의 뜻이에요」가 나온다. 틀린 김에 のむ까지 한 번 더 보고 넘어가니, 오답 하나가 단어 하나를 더 익히는 기회가 됐다.

대화 문제는 이제 대화를 통째로 이해하면서 답을 고를 수 있다. 전에는 내가 만든 줄의 뜻만 나와서 상대의 말은 뜻을 모른 채 지나가기도 했는데, 지금은 두 줄 모두 해석이 나오니 누가 무엇을 묻고 어떻게 답하는지까지 온전히 따라갈 수 있다. 「いま なんじ ですか。」와 「ごぜん くじ です。」를 따로 외우기보다, 묻고 답하는 한 쌍으로 기억하게 됐다.

다음에 N4나 다른 학습 콘텐츠를 만든다면, 그때는 모바일 화면을 좀 더 신경 쓰면서 개발해야겠다. 출퇴근길에 모바일로 공부하는 날이 더 많았는데, N5 콘텐츠를 준비할 때는 그 점을 조금 안일하게 생각했던 것 같다.

물론 모바일을 신경 써서 만든다고 고칠 곳이 안 나오리라고 기대하지는 않는다. 공부하다 보면 손볼 곳은 또 나올 테고, 그때도 이번처럼 계속 고쳐 나가면서 이렇게 기록으로 남길 생각이다. 다행히도 공부하면서 손보는 이 과정도 즐겁다.