질문 카드를 접고 앱에서 답할 수 있게 했다

답하기 전까지 카드를 비킬 수 없었다

세션이 선택지 질문을 하면 위젯에 질문 카드가 나온다. 앱의 질문 창과 동시에 떠 있어서 어느 쪽에서 답해도 되는데, 앱에서 답하려고 할 때가 문제였다. 카드는 답이 갈 때까지 화면 구석을 계속 차지했고, 닫는 버튼도 없었다.

질문이 길면 더 곤란했다. Electron으로 옮기며 카드 글씨를 도트 글꼴 갈무리14로 바꿨는데, 원래 글씨보다 커서 질문이 조금만 길어도 카드가 화면 밖으로 나갔다. 아래쪽의 답하기 버튼이 화면 밖에 있으면 위젯에서는 답할 수도 없다.

닫지 않고 접는다

카드를 닫아 없애는 방법도 있었지만 질문은 아직 답을 기다리는 중이다. 카드를 없애면 어느 세션이 묻고 있는지 놓치기 쉽다. 그래서 머리줄 한 줄만 남기고 접게 했다. 접힌 줄에는 질문 표시와 세션 이름이 그대로 보이고, 코어도 계속 보라색이다. 그 줄을 누르면 다시 펼쳐진다.

카드 머리줄 오른쪽에는 버튼이 두 개다.

앱으로 가는 건 결국 앱에서 답하겠다는 뜻이라서, ↗를 누르면 카드도 같이 접힌다. 앱에서 답하면 세션의 질문 상태가 풀리면서 카드가 사라진다. 다른 질문이 새로 오면 펼친 상태로 나온다. ↗는 위젯이 그 세션의 앱 쪽 기록을 찾았을 때만 보인다.

순서도 맞춰야 했다. 접을 때는 원래 내용을 그대로 둔 채 높이를 줄여 내용이 말려 들어가게 하고, 다 줄어든 뒤에 머리줄만 남긴다. 내용을 먼저 바꾸면 빈 공간이 줄어드는 모습이 된다. 펼칠 때는 반대로 내용을 먼저 넣고 한 줄 높이에서 늘린다. 애니메이션이 끝나는 순간 원래 높이로 한 프레임 돌아가지 않도록, 끝난 높이를 붙잡아 둔 채 내용을 바꾸고 나서 놓는다.

긴 질문은 카드 안에서 스크롤한다

카드 글씨는 호버 카드와 같은 한 단계 작은 갈무리11로 바꿨다. 줄 높이가 20% 남짓 줄어서 같은 질문이 덜 길어진다. 선택지 이름도 길면 말줄임표로 자르던 것을 설명처럼 여러 줄로 이었다.

그래도 화면보다 긴 질문은 있을 수 있어서, 질문과 선택지 부분만 카드 안에서 스크롤되게 했다. 머리줄과 아래쪽 답하기 버튼은 스크롤 영역 밖에 있어서 항상 보인다. 스크롤 영역의 최대 높이는 코어가 있는 모니터의 작업 영역 높이에서 머리줄, 버튼, 테두리 몫을 뺀 값이다. 배치할 때마다 다시 계산하니 다른 모니터로 옮겨도 그 모니터에 맞는다.

감수한 것

머리줄에 버튼 두 개가 들어가면서 세션 이름이 전보다 일찍 잘린다. 스크롤해야 하는 긴 질문은 선택지를 한눈에 볼 수 없다. 접어 둔 카드는 누를 때까지 접힌 채로 있어서, 접은 걸 잊으면 질문이 남아 있다는 신호는 보라색 코어와 한 줄짜리 머리줄뿐이다.