개요
안녕하세요. 이제는 웹 개발자 설탕시럽입니다. 3개월 단기 인턴 과제를 수행하면서, 1분 단위로 들어오는 기온, 습도 측정값을 하루, 한 주, 한 달 등등 기간에 맞게 데이터를 보여야 하는 화면을 설계하게 되었습니다. 한 화면을 설계하기 위해 겪은 시행착오를 공유하려고 합니다.
화면 설명
개요에서 말했던것 처럼, 데이터의 종류는 기온과 습도였습니다. 해당 데이터는 1분 단위로 수집되고 있고 측정된 과거부터 지금까지의 값을 모니터링하는 화면을 설계해야 했습니다.
초기에 화면을 설계하기 위해 1차원적으로 테이블을 어떻게 구성할지 고민했습니다. 1분단위 데이터를 표시하기 위해 연도, 월, 일, 시, 분이라는 구분이 있고, 구분을 어떤 식으로 조합해도 한 페이지에 테이블로 담을 수 없었습니다. 년-월-일 / 시-분으로 나눠 x축 y축을 구성했을 때, 데이터를 제대로 표기할 수 없을 정도의 가독성이었고, 테이블로 구성하 기의 타협을 봐야만 했습니다.
1일 단위의 평균 기온 데이터를 제공하기로 하고, 해당 날을 선택하면 측정된 1분단위의 데이터를 팝업 창 형태로 제공하는 방향으로 정하고 페이지를 설계했습니다. 설계한 초기 버전의 페이지는 아래와 같습니다.
문제점 1. 가독성
데이터를 테이블에 담는것만으로는 가독성이 너무 저하되었습니다. 기존에 가독성을 고려하여 팝업창으로 분단위 데이터를 분리하고, 월/일 방식으로 테이블을 표현했지만 여전히 글자는 작고 가독성은 좋지 못했습니다. 가로 세로 방향으로 화면을 넘어서 데이터를 표시할 수밖에 없었고, X, Y축으로 스크롤 바가 생겼습니다.
문제점 2. UI
설계된 화면처럼 1년정도의 데이터를 검색하는 게 아닌, 1~2달 또는 24개월, 36개월 데이터를 요청한다면 UI가 부자연스러울 수밖에 없었습니다. 앞서 말한 것처럼 X, Y축으로 스크롤 바가 생기며 데이터가 화면에서 잘렸습니다. 반대로 1,2달 정도를 검색하게 되면 3 칼럼짜리 테이블이 되어 UI가 부자연스러웠습니다.
임의로 칸마다 가로의 크기를 지정한다고 해도 UI가 어설프다는 문제를 피할 수 없었습니다.
따라서, 위 문제점을 보완하기 위해 테이블로 전체 데이터를 보여주는 방식이 아닌 다른 방식에 설계가 가장 필요했습니다. 테이블로 표현하기에는 한계가 명확했고 많은 숫자 데이터를 화면에 보여주기 위한 더욱 효과적이고 가독성이 좋은 방법을 고려해야 했습니다.
기존 서비스 참고
결책을 찾기 위해 기존의 다른 웹 서비스를 참고했습니다. 기온/습도와 같은 다량의 데이터를 관리하는 기상청의 UI를 참고했습니다. 아래는 기상청에서 참고한 웹 서비스중 하나의 캡처입니다.
기상청에서는 기후 통계 데이터를 제공하기 위해 우선 일일 단위의 최고, 최저, 평균 기온 데이터를 제공했습니다. 진행 중인 프로젝트처럼 매 분단위의 데이터는 아니었지만, 기존이 테이블보다 효과적인 방식인 그래프를 도입해서 시각적으로 보기 좋게 만들었습니다.
아래 테이블은 기존의 제가 설계한 것처럼 일일 평균 기온을 최대한 많이 보여주겠다는 데에 초점을 둔 게 아닌, 가로방향으로 한 칸을 전부 놓으며 Y축으로만 스크롤바가 생기게 구성하고 가독성을 높였습니다.
비록 해당 데이터의 단위는 월별 측정 기준이었지만, 다른 페이지에서 일일 단위로 만들어진 페이지도 참고하면서 페이지를 다시 설계하게 되었습니다.
( 참고하고 검색했던 다른 모든 자료는 포스트의 최하단에 링크로 남겨놓겠습니다 )
결과
몇 번의 시행착오와 피드백을 받은 최종 결과물입니다.
- 가독성 : 기존의 가독성 문제를 해결하기 위해 일일단위 평균, 최고, 최저 기온 데이터를 활용한 그래프를 활용했습니다. 그래프 아래에 테이블을 위치했고, 기존의 데이터를 구겨 넣은듯한 UI가 아닌 한 줄에 여유롭게 아이템을 넣었습니다. X축으로 발생하는 스크롤 바를 없애고 Y축 방향으로만 스크롤이 발생하게 했으며, 이후 페이징을 도입하고 현재 화면에 보이는 것처럼 날짜 검색 기능을 넣어 효과적으로 일일 데이터를 확인할 수 있게 구성했습니다.
- UI : 우선 X, Y 두 방향 모두 스크롤바가 생기지 않기 위해 노력했습니다. 가로방향으로 테이블 아이템들을 넣어 Y축으로만 스크롤바가 생기게 하여 화면의 부자연스러움을 최소화했습니다.
일일 단위의 데이터에서도 그래프를 도입하고 모든 데이터를 억지로 보이지 않는 대신 각 시간대 별로 데이터를 확인할 수 있게 구성했습니다. - 추가로 데이터가 1분 단위로 들어오지만 화면에는 5분 단위로 표기하기로 변경했습니다. 1분 단위 데이터를 화면에 표기하는 것보다 당연히 UI와 가독성이 올라갔으며, 1분 단위의 세세한 데이터 표현은 포기했습니다.
회고
하나의 포스트에 담긴 내용이지만 실제로는 2~3일 동안 화면을 설계하면서 수정과 피드백을 거치고 거친 작업이었습니다. 실제 회사에서 동작하는 센서는 20가지 정도 되는 데이터가 존재한다는 점에서 확장성까지 고려해서 어떻게 화면을 설계해야 할지 생각보다 많은 고민과 오랜 생각이 담긴 설계였습니다.
OJT 이전, 코딩하기 전 프로젝트 설계에 이렇게 오랜 시간과 고민을 담은 것 또한 처음이었기에 좋은 경험이었습니다. 하나의 페이지를 추가하면서 기능을 담으면, 다른 페이지에 영향이 가고, 데이터베이스도 수정하고 그와 관련된 기본적인 CRUD가 모두 필요한지 고민하고 설계하는 것까지 꽤나 머리 아프지만 나름 유익한 경험이라고 생각이 들었습니다.
이전 프로젝트를 진행하면서 디테일한 설계의 중요성을 느끼고 있었는데, 이번 기회를 통해 디테일한 설계, UI/UX 와 사용하는데 필요한 기능을 원 없이 고민해 봤습니다
[ 참고/공부했던 다른 사이트 ]
https://data.kma.go.kr/climate/RankState/selectRankStatisticsDivisionList.do
https://www.weather.go.kr/w/index.do
http://www.climate.go.kr/home/09_monitoring/ghg/co2_global
http://www.climate.go.kr/home/09_monitoring/uv/uv_main
http://www.climate.go.kr/home/09_monitoring/wdws/ws_typh
https://data.kma.go.kr/climate/RankState/selectRankStatisticsDivisionList.do?pgmNo=179
https://data.kma.go.kr/climate/average30Years/selectAverage30YearsKoreaList.do?pgmNo=188
https://data.kma.go.kr/stcs/grnd/grndTaList.do?pgmNo=70
'회고 > 인턴 회고!!!' 카테고리의 다른 글
| 실시간 수집 데이터를 관리하는, 통계 테이블 관리하기 (0) | 2023.09.25 |
|---|