채팅에서 프로포즈·결혼을 감지해 풀스크린 축하 연출을 구현한 경험

프로포즈나 결혼 같은 특별한 이벤트를 채팅 채널에서 감지했을 때, 사용자에게 그 순간을 제대로 축하해주는 연출이 필요했다. 이번에 풀스크린 축하 UI를 별도 컴포넌트로 분리해서 구현했는데, 이 작업을 통해 느낀 이벤트 기반 UX 설계와 컴포넌트 아키텍처에 대한 생각을 정리해본다.

축하라는 '감정'을 기술로 표현하기

사실 축하 연출은 순수한 기능이 아니다. 채팅 메시지로 "결혼해요" 같은 내용이 들어와도 그냥 텍스트로만 표시할 수 있다. 하지만 그렇게 하면 사용자가 느끼는 경험은 너무 담담하다. 반대로 그 순간을 화면 전체로 축하해주는 연출을 하면? 사용자는 '아, 우리 채팅 서비스가 이 순간을 정말 소중하게 여기는구나' 하고 느낀다.

풀스크린 처리가 중요한 이유가 여기다. 보통 UI 변경은 기존 레이아웃 내에서 일어나지만, 축하 연출은 일반적인 채팅 흐름을 '잠깐 멈추고' 사용자의 주의를 온전히 집중시키는 게 목표다. 따라서 다른 UI 요소와 무관하게 독립적으로 표시되어야 하고, 그게 풀스크린 레이어라는 방식으로 구현되는 거다.

파일 분리로 관심사 명확히 하기

특히 celebration.tsx를 별도로 분리한 이유는, 이 컴포넌트가 갖는 '특수성' 때문이다. 일반적인 채팅 메시지와 달리, 축하 연출은:
- 특정 키워드(프로포즈, 결혼 등)에만 반응
- 자체 애니메이션 시퀀스를 가짐
- 사용자 인터랙션(닫기 버튼 등)으로 별도 관리

이런 조건들을 chat-client.tsx(채팅 메인 로직)에 섞어 놓으면 시간이 지날수록 복잡도가 높아진다. 반대로 분리하면, 나중에 축하 연출을 확장하거나 수정할 때 영향 범위가 명확해진다.

구현하며 마주친 트레이드오프

// 예: chat-client에서 celebration 감지
if (isSpecialEvent(message.content)) {
  triggerCelebration(eventType);
}

이렇게 간단한 로직처럼 보이지만, 실제로는 몇 가지 결정이 숨어있다:

1. 언제 감지할 것인가?
메시지가 DB에 저장된 후인가, 실시간으로 UI에 나타나기 전인가? 후자를 선택하면 사용자가 메시지를 입력하자마자 자신의 축하 연출을 보게 된다. 이건 때론 어색할 수 있다. 하지만 이번에는 그렇게 설계했는데, 이게 팀과 논의할 만한 포인트였다.

2. 애니메이션 시간은?
너무 빠르면 놓치고, 너무 길면 성가신다. 이건 사용자 테스트나 피드백이 꼭 필요한 부분이다.

3. 다중 축하 이벤트?
프로포즈와 결혼이 동시에 일어나면? 큐잉할 건가, 무시할 건가, 겹쳐서 표시할 건가?

이런 것들은 '맞는 답'보다 '비즈니스/UX 관점의 의도'가 중요하다. 코드 리뷰에서도 이런 부분을 팀과 함께 논의하면서 '왜 이렇게 구현했는가'를 명확히 할 수 있다.

다음 사람을 위한 설계

혹시 나중에 "고객 생일 축하", "1주년 기념 이벤트" 같은 새로운 축하 연출이 추가되면? 지금의 구조라면, 대부분 celebration.tsx와 globals.css에만 변경을 가하면 된다. chat-client.tsx는 이미 isSpecialEvent() 같은 '감지 함수'를 통해 추상화되어 있으니까.

이게 팀 리딩 관점에서 중요하다. 내가 쓴 코드는 내가만 쓰는 게 아니다. 다른 팀원이 나중에 이 코드를 보고, "아, 특별 이벤트를 추가하려면 여기를 건드리면 되겠네" 하고 빠르게 찾아가길 원한다. 그래서 파일 구조도, 함수 이름도, 주석도 '다음 사람'을 생각하면서 작성한다.

다음엔 이런 특별 연출들을 더 쉽게 추가할 수 있는 메타 패턴까지 고민해봐야겠다.

🛒 이 글과 어울리는 추천 상품

• 기계식키보드 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.