CSS가 아니라 서버 응답에서 미리보기 원문 숨기기
보호할 원문을 내려준 뒤 화면에서 흐리지 말고, 정직한 미리보기 형태는 유지하면서 서버 응답 경계에서 내용을 변환하는 방법을 설명합니다.
출처 및 AI 안내: 이 글은 제미니의 개발실무 유튜브를 기반으로 작성되었습니다.
gpt-5.6-sol모델을 사용해 생성·편집했습니다.
클라이언트가 원문을 이미 받았다면 흐리게 보이는 댓글도 실제로는 노출된 데이터다. 브라우저 도구에서 블러 스타일을 지울 수 있고, 화면을 건드리지 않아도 네트워크 응답에서 원문을 찾을 수 있다.
로그인이나 결제 뒤에만 보여야 하는 내용이라면 경계는 서버 응답에 두는 편이 낫다. 보호할 문장을 내려준 뒤 클라이언트에 숨기라고 하지 말고, 로그인하지 않은 사용자에게는 처음부터 미리보기 표현을 반환해야 한다.
CSS는 화면만 바꾸고 응답은 바꾸지 않는다
클라이언트 블러는 원하는 시각 효과를 만들지만 이미 전달한 데이터를 바꾸지는 않는다. 브라우저 도구를 아는 사용자는 스타일을 제거하거나 페이지를 채운 API 요청을 살펴볼 수 있다. 이 상태에서는 접근 조건이 화면 효과로만 구현된 셈이다.
이 문제는 브라우저 한 화면에 그치지 않는다. 나중에 앱이 같은 API를 직접 사용한다면 모든 클라이언트가 같은 가리기 로직을 빠짐없이 구현한다고 기대하기 어렵다. 호출자에게 원문을 줄지 미리보기를 줄지는 응답 자체에 반영되어야 한다.
프레젠테이션 경계에서 미리보기로 변환한다
애플리케이션 내부에서는 게시글과 댓글을 그대로 조회할 수 있다. 프레젠테이션 계층, 즉 API 응답을 만드는 지점에서 로그인 상태에 따라 밖으로 나갈 표현을 바꾼다. 로그인한 사용자는 댓글을 받고, 그렇지 않은 사용자는 원문의 공백이 아닌 글자를 다른 문자로 치환한 텍스트를 받는다.
공백과 줄바꿈, 대략적인 글자 수를 유지하면 실제 댓글의 형태가 남는다. 사용자는 내용이 있고 어느 정도 길이인지 알 수 있지만 원래 문장을 받지는 않는다. 이 변환은 암호화가 아니라 미리보기 상황을 위한 별도 응답 표현이다.
미리보기가 실제보다 많은 내용을 약속해서도 안 된다
고정 이미지를 보여줘도 원문 전송은 피할 수 있다. 다만 문 뒤에 무엇이 있는지를 왜곡할 수 있다. 긴 블러 영역을 보여준 뒤 로그인했더니 한 줄만 나온다면 사용자는 낚였다고 느낄 수 있다. 실제 공백과 길이를 살린 미리보기는 그 유도를 조금 더 정직하게 만든다.
예시는 로그인을 기준으로 하지만, 내부 포인트나 결제로 댓글을 여는 가상의 기능에도 같은 판단을 적용할 수 있다. 아직 원문을 볼 조건이 아니라면 API도 원문을 보내지 않아야 한다. 클라이언트는 미리보기의 모양을 만들고, 어떤 텍스트를 실제로 공개할지는 서버 응답 경계에서 결정한다.