Kopring Boot와 Thymeleaf로 날씨 예보 웹 실시간 미세먼지 UI 개선

프로젝트 개요

이 프로젝트는 공공 API를 활용해 날씨와 미세먼지 정보를 제공하는 웹 애플리케이션입니다. 주요 기능은 다음과 같습니다:

• 날씨 정보 표시: 현재 온도, 시간대별 예보 등
• 미세먼지 예보: 특정 날짜의 미세먼지 예보 데이터 표시
• 실시간 미세먼지: 서울 지역의 실시간 미세먼지 농도와 등급 표시

Spring Boot를 백엔드로 사용하고, Thymeleaf를 프론트엔드 템플릿 엔진으로 활용했습니다. 공공 API에서 데이터를 가져와 사용자에게 시각적으로 보여주는 것이 목표였습니다.

문제 1: Thymeleaf 템플릿 파싱 오류

개발 중 실시간 미세먼지 데이터를 테이블로 표시하는 과정에서 Thymeleaf 템플릿 파싱 오류(TemplateProcessingException)가 발생했습니다.

오류 원인

th:classappend 속성에서 중첩된 삼항 연산자를 사용했는데, 조건이 올바르게 묶이지 않아 Thymeleaf가 표현식을 파싱하지 못했습니다. 오류가 발생한 코드는 다음과 같습니다:

<td class="grade-cell"
    th:classappend="${dust.pm10Grade == '좋음'} ? 'grade-good' :
                    ${dust.pm10Grade == '보통'} ? 'grade-moderate' :
                    ${dust.pm10Grade == '나쁨'} ? 'grade-bad' :
                    ${dust.pm10Grade == '매우나쁨'} ? 'grade-very-bad' : ''"
    th:text="${dust.pm10Grade}"></td>

해결 방법

삼항 연산자를 괄호로 묶어 문법을 명확히 했습니다.
수정된 코드는 다음과 같습니다.

이 수정으로 Thymeleaf 파싱 오류가 해결되었고, 미세먼지 등급에 따라 적절한 색상 클래스가 적용되었습니다.

문제 2: 실시간 미세먼지 데이터에서 "N/A" 표시의 어색함

실시간 미세먼지 데이터를 표시하는 테이블에서 데이터가 없을 경우 "N/A"로 표시되었습니다. 하지만 "N/A"는 기술적인 용어로, 처음 사용하는 사용자에게 어색할 수 있다고 판단했습니다.

개선 방향

• "N/A"를 더 친근한 표현인 "측정값 없음"과 "등급 정보 없음"으로 변경
• 데이터가 없을 경우 시각적으로 구분되도록 CSS 스타일 적용

수정된 코드

weather.html에서 실시간 미세먼지 섹션을 다음과 같이 수정했습니다.

<!-- 미세먼지(PM10) 값 표시 -->
<td>
    <span th:if="${dust.pm10Value != 'N/A'}" th:text="${dust.pm10Value} + ' μg/m³'"></span>
    <span th:if="${dust.pm10Value == 'N/A'}" class="no-data" th:text="'측정값 없음'"></span>
</td>
<!-- 미세먼지 등급 표시 -->
<td class="grade-cell"
    th:classappend="${dust.pm10Grade == '좋음' ? 'grade-good' : (dust.pm10Grade == '보통' ? 'grade-moderate' : (dust.pm10Grade == '나쁨' ? 'grade-bad' : (dust.pm10Grade == '매우나쁨' ? 'grade-very-bad' : 'no-data')))}"
    th:text="${dust.pm10Grade != 'N/A' ? dust.pm10Grade : '등급 정보 없음'}"></td>

추가로, CSS 파일에 no-data 클래스를 정의해 데이터가 없을 때 회색 이탤릭체로 표시되도록 했습니다.

.no-data {
    color: #888;
    font-style: italic;
}

결과

• "N/A"가 "측정값 없음"과 "등급 정보 없음"으로 변경되어 사용자 친화적으로 개선되었습니다.
• 데이터가 없는 경우 회색 이탤릭체로 표시되어 시각적으로 구분되었습니다.

배운점

• Thymeleaf 문법의 중요성: Thymeleaf에서 복잡한 조건문을 사용할 때는 문법을 정확히 지켜야 하며, 괄호를 활용해 가독성을 높이는 것이 중요합니다.

• 사용자 경험 고려: 기술적인 용어("N/A")를 일반 사용자에게 맞는 표현으로 변경하고, 시각적 피드백을 추가해 사용자 경험을 개선하는 것이 중요합니다.

마무리

이번 프로젝트를 통해 Spring Boot와 Thymeleaf를 활용한 웹 개발의 전반적인 흐름을 익혔고, 작은 오류를 해결하며 문제 해결 능력을 키울 수 있었습니다.
또한, 사용자 경험을 고려한 UI 개선의 중요성을 다시 한 번 깨달았습니다.
앞으로도 더 나은 사용자 경험을 제공하는 웹 애플리케이션을 만들기 위해 노력하겠습니다!