별이 자란다

빈 태스크와 채워진 태스크

Fecit에서 태스크는 단순한 한 줄짜리 할 일이 아닙니다. 시간과 장소, 목표, 기대, 장애물, 준비물, 회고, 만족도 — 의도와 회고를 위한 자리가 여럿 마련되어 있습니다.

대부분의 태스크는 거의 비어 있습니다. 제목 하나, 그게 전부. 그래도 됩니다. minimal하게 쓰는 사람한텐 그게 맞으니까요.

가끔 어떤 태스크는 깊어집니다. 무엇을 이루고 싶은지 적고, 막힌 점을 정리하고, 끝나고 무엇을 느꼈는지 남깁니다. 그렇게 채워진 태스크는 다른 태스크와 같지 않습니다. 과거에 들였던 시간이 거기 쌓여 있습니다.

목록에서 그 차이를 볼 수 있으면 어떨까. 깊이 들어간 태스크는 시각적으로도 깊어 보였으면 했습니다.

fidelity

태스크에 채워진 항목 수를 세는 작은 점수를 만들었습니다. 이름은 fidelity. 한국어로 풀면 “충실도”에 가깝습니다.

룰은 단순합니다.

• 텍스트 7개 (description, instruction, target, expectation, obstacle, result, retrospect) — 채워져 있으면 +1씩
• 메타 3개 (difficulty, priority, satisfaction) — 값이 있으면 +1씩
• 아이템 6종 (materials, tools, venue, personnel, qualification, sub_task_links) — 각 아이템마다 +1

상한이 없습니다. 태스크가 두꺼울수록 fidelity가 커집니다.

여기서 일정 항목(시작/종료 시간, 주소)과 첨부물은 일부러 뺐습니다. 시간을 잡는 행위는 의도를 깊게 한다는 의미와 다르고, 첨부물은 양보다 내용이 중요하니까요.

색이 아닌 형태로

이걸 어떻게 보여줄지 고민이 있었습니다.

태스크 옆 별 아이콘에는 이미 사용자가 고른 Point Color가 들어가 있습니다. 색은 분류와 정체성의 도구입니다. fidelity를 또 색으로 표현하면 두 신호가 충돌합니다.

그래서 형태로만 표현하기로 했습니다. 별의 색은 그대로 두고, 별 주변에 작은 장식이 단계적으로 나타나도록.

세 단계

• Level 0 (fidelity 0): 별 하나. 비어 있는 태스크는 비어 있는 모습 그대로.
• Level 1 (fidelity 1~2): 별의 네 모서리에 작은 점 네 개가 살짝 돋아납니다. 단초가 보이는 정도.
• Level 2 (fidelity 3+): 점이 짧은 선으로 자라 네 방향으로 뻗어 나갑니다. 별이 더 분명하게 빛나는 느낌.

3단계, 4단계도 그려봤습니다. 다이아몬드, 송곳 같은 형상도 시도했고요. 결국 세 단계로 줄였습니다. 더 세분화하면 단계가 너무 자주 바뀌어서 의미가 옅어집니다. 세 단계 정도가 한눈에 구분되면서 “성장한다”는 감각이 살았습니다.

자산이 된 디자인

처음에는 컴포넌트가 코드로 ray를 그렸습니다. 각도, 길이, 두께를 변수로 받아 SVG로 그리는 방식. 빠르게 시도하기엔 좋았는데, 디자인 디테일을 다듬기 시작하니 코드가 점점 복잡해졌습니다.

그래서 각 단계의 모양을 SVG 자산 파일로 분리했습니다. fidelity-star-0.svg, 1.svg, 2.svg. 컴포넌트는 fidelity 값으로 단계를 결정하고, 그에 맞는 SVG를 골라 렌더링하기만 합니다.

코드는 단순해졌고, 디자인은 자산만 다시 그리면 자유롭게 바꿀 수 있게 됐습니다. 어떤 결정은 코드에서 하지 않을 때 더 유연해집니다.

보상이 아니라 거울

이 별은 보상이 아닙니다. 점수를 모아 무언가와 교환하는 게임 메커닉이 아닙니다. 기록한 만큼 자기 흔적이 남고, 그 흔적이 보일 뿐입니다.

회고를 한 번 더 적은 태스크는 그렇지 않은 태스크와 다르게 보입니다. 그 차이가 작은 시각적 신호로 돌아옵니다. 다음에 비슷한 태스크를 시작할 때, 무의식 중에 한 줄을 더 적게 만드는 정도. 거기까지가 의도한 효과입니다.

깊이 쓰라고 강요하는 게 아니라, 깊이 쓴 사람의 노력을 조용히 인정하는 장치. 그게 별이 자라는 이유입니다.