MyStock의 DB 작업이 어느 정도 마무리되고 투자기록까지 실제 데이터와 연결되면서 프로그램의 기본적인 뼈대는 꽤 많이 갖춰졌다. 처음에는 데이터를 가져와 화면에 보여주는 것이 중요했고, 이후에는 어떤 데이터를 DB에 저장하고 무엇을 기준 데이터로 삼을지가 중요했다. 그런데 직접 사용하기 시작하니 다른 것들이 눈에 들어오기 시작했다. 기능은 동작하지만 사용하기에는 불편한 부분들이다.
이번 작업은 새로운 데이터를 추가하거나 DB 구조를 변경하는 대신, 실제로 MyStock을 사용하면서 불편했던 화면과 동작을 정리하는 데 집중했다.
Screenshot Mode
블로그에 MyStock 관련 글을 쓰면서 가장 먼저 문제가 생겼다. 스크린샷을 찍기가 곤란했다. 대시보드에는 투자원금, 평가금액, 평가손익, 평균매입단가, 보유수량 등이 그대로 표시된다. 혼자 사용할 때는 문제가 없지만 블로그에 화면을 올리려면 매번 이미지를 편집해야 했다. 그래서 아예 Screenshot Mode를 만들었다.
Screenshot Mode를 켜면 평균매입단가, 보유수량, 투자원금, 평가금액처럼 투자 규모를 알 수 있는 정보는 가린다. 반면 종목명, 현재가, 수익률, 등락률 등 화면을 이해하는 데 필요한 정보는 그대로 남긴다. 투자분석과 투자기록의 차트에서도 매수·매도 위치는 유지하되 체결가격과 민감한 hover 정보는 숨긴다. DB나 내부 데이터를 변경하는 기능은 아니다. 표시 단계에서만 정보를 가리고, 모드를 끄면 원래 화면으로 즉시 돌아온다.
블로그에 화면을 올리려고 만든 기능인데, 다른 사람에게 프로그램을 보여줄 때도 꽤 쓸 만하다.
투자정보 시각화
차트도 조금씩 손봤다. 투자분석과 투자기록의 실제 매매 시점을 좀 더 직관적으로 보기 위해 색상의 의미를 통일했다.
매수와 상승은 녹색, 매도와 하락은 빨간색
매수·매도 marker에는 체결가격도 함께 표시했다. 단순히 거래 위치만 점으로 보는 것보다 당시 어느 가격에서 사고팔았는지 바로 확인할 수 있어 매매 복기가 훨씬 편해졌다. 시황분석도 같은 기준을 적용해 선택 기간의 고점은 녹색, 저점은 빨간색으로 표시했다. 다만 VIX와 Fear & Greed처럼 여러 정보가 이미 함께 표시되는 차트는 marker를 추가하면 오히려 복잡해져 기존 형태를 유지했다.
투자현황도 처음에는 계좌별 비중을 새로 표시하려고 했는데 작업하다 보니 왼쪽에 이미 비슷한 정보가 있었다. 다시 의미를 따져보니 왼쪽은 현재 평가금액 기준 계좌 비중이었다. 반면 계좌 데이터에는 실제 매입금액인 투자원금도 있다. 그래서 같은 정보를 두 번 보여주는 대신 왼쪽은 평가금액, 오른쪽은 투자원금으로 나눴다. 현재 평가된 자산의 구성과 실제 투입한 원금의 구성을 한 화면에서 비교할 수 있게 된 셈이다.
오늘 등락 영역도 추가했지만 현재 데이터만으로 정확한 계좌별 일간 성과를 계산하기에는 근거가 부족했다. 누적 평가수익률 같은 비슷한 숫자를 대신 넣을 수도 있지만 의미가 다르다. 그래서 지금은 —로 남겨뒀다. 화면을 채우기 위해 의미가 다른 숫자를 사용하는 것보다는 비어 있는 편이 낫다.
작은 불편들
ETF 구성종목 화면에는 provider, 구성종목 수, 기준일, 비교 날짜, 시세 상태 등 많은 설명이 표시되고 있었다. 실제로 사용해보니 항상 볼 필요가 없는 정보도 많았다. 화면에는 provider · 구성종목 수 · 기준일 · 시세 표시 · 미표시 정도만 남기고 한 줄로 정리했다. 일간·주간 데이터나 계산을 없앤 것은 아니고, 화면의 설명만 줄였다.
새로고침 버튼에서도 UX 문제 하나를 발견했다. 버튼을 눌러도 화면에 별다른 반응이 없어 처음에는 새로고침이 동작하지 않는 줄 알았다.
확인해보니 기능은 정상적으로 동작하고 있었다. 사용자에게 동작 중이라는 사실을 보여주지 않았을 뿐이다. 그래서 클릭하면 버튼을 잠시 비활성화하고 구성종목 시세 갱신 중...을 표시하도록 했다. 완료되면 새로운 시세를 반영하고, 실패하면 기존 데이터는 유지하면서 실패 상태를 알려준다.
기능적으로는 이미 작동하던 새로고침이었다. 하지만 사용하는 사람 입장에서는 반응이 없으면 작동하지 않는 기능과 다를 것이 없었다. 화면 정렬도 꽤 오래 붙잡았다. 나란히 있는 두 테이블의 header 위치가 미묘하게 달라 몇 픽셀을 맞추기 위해 여러 번 수정했다. 테스트 환경에서는 정확히 맞았지만 실제 macOS에서는 미세한 차이가 남았다. 결국 그 정도는 받아들이기로 했다.
마지막으로 상태바 오른쪽에는 logon.tistory.com을 작게 넣었고, 이것은 작은 워터마크에 가깝다.
마무리
이번 작업에서는 DB schema도, canonical data도 변경하지 않았다. 대신 프로그램을 직접 사용하면서 질문이 조금 달라졌다. 데이터가 정확한지를 넘어 어떤 정보를 보여줄 것인지, 무엇을 숨길 것인지, 사용자의 동작에 어떻게 반응할 것인지를 보기 시작했다. 프로그램이 동작하는 것과 실제로 편하게 사용하는 것은 확실히 다른 문제였다. MyStock도 이제 기능을 하나씩 붙이는 단계에서 조금씩 벗어나고 있는 것 같다.
그리고 테이블 header 몇 픽셀까지 쳐다보기 시작했다면, 그만할 때도 됐다...