[제작기]서버와 브라우저가 시간을 다르게 표시하면 생기는 일

같은 날짜를 표시하는 코드가 서버와 브라우저에서 똑같이 보일 것이라고 생각하기 쉽습니다. Builders Korea에서는 이 차이가 실제 화면 경고로 나타났습니다.

무슨 일이 있었나요?

서버에서 만든 날짜 문자열과 브라우저가 처음 계산한 문자열이 달랐습니다. 실행 환경의 언어·시간대 데이터에 따라 오전·오후 표시 같은 부분이 달라질 수 있었기 때문입니다.

서버 렌더링을 사용하는 React 앱은 이미 만들어진 HTML을 브라우저의 컴포넌트와 연결합니다. 이때 처음 출력이 맞아야 합니다. React의 hydration 안내도 서버와 클라이언트의 출력 불일치를 다룹니다.

이번 사이트의 선택

게시글의 상세 날짜는 서울 시간 기준의 일정한 숫자 형식으로 표시하도록 했습니다.

2026.10.25 21:30

이 예시는 형식 설명용 날짜입니다. 모든 사용자에게 자기 지역 시간을 보여주는 제품이라면 다른 접근이 필요합니다. 이번에는 한국어 커뮤니티에서 일관된 게시 시각을 보여주는 목적에 맞춰 기준을 정했습니다.

시간 표시를 설계할 때 정할 것

1. 데이터베이스에 저장하는 시각과 화면에 보여주는 시간대를 구분합니다.
2. 게시글 상세처럼 정확한 시각이 필요한 곳은 기준 시간대를 정합니다.
3. “방금 전”처럼 상대적인 표현은 시간이 지나면 바뀐다는 점을 고려합니다.
4. 서버가 만든 첫 화면과 브라우저의 첫 표시를 비교합니다.

언어를 지정했다고 모든 환경 차이가 사라지는 것은 아닙니다. 런타임의 국제화 데이터와 기본 시간대도 결과에 영향을 줄 수 있어, 실제 배포 환경에서 확인하는 과정이 필요했습니다.

확인은 어디서 하나요?

개발자 도구의 콘솔에 hydration 관련 경고가 있는지 확인하고, 새로고침 직후 날짜가 갑자기 바뀌는지도 봅니다. 내용은 비슷한데 문자열이 조금 다르면 날짜, 난수, 브라우저 전용 값부터 살펴볼 만합니다.

경고를 숨기기 전에, 제품이 어떤 시간 기준을 약속할지 먼저 정하는 것이 이번 문제의 해결 출발점이었습니다.