1. 마이페이지 대시보드에서 발견한 UX의 틈

마이페이지의 활동 대시보드에는 게시글을 한 번도 작성하지 않은 사용자는 랭킹을 확인할 수 없는 화면을 보게 되는 화면이 있었습니다.
랭킹을 확인할 수 없는 화면
라는 문구와 함께 글쓰기로 연결되는 버튼이 배치 돼있었습니다. 한눈에 보기에도 사용자에게 "무언가 해보라"고 제안하는 UX 요소로 보였을겁니다.
문제는 이 버튼을 눌렀을 때의 흐름이였습니다.
처음 구현되어 있던 방식은 다음과 같았습니다:
  1. 버튼을 누르면 커뮤니티 리스트 페이지로 이동하고,
  2. 해당 페이지에서 사용자가 다시 한 번 "글쓰기" 버튼을 눌러야만 팝업이 열렸습니다.
즉, 사용자 입장에서는 두 단계의 클릭이 필요했고,
"글을 쓰고 싶어서 버튼을 누른 건데도, 왜 글쓰기 창이 바로 안 뜨지?" 하는 단절감이 생길 수밖에 없었습니다.
사용자가 무의식적으로 기대하는 행동 흐름과 UI의 실제 동선이 어긋날 때, 사용자는 금방 흥미를 잃고 떠날 수도 있다고 느꼈습니다.

2. 기존 흐름: 페이지 이동 → 팝업 수동 클릭

처음에 “첫 게시글 작성하러 가기” 버튼을 눌렀을 때의 동작은 직접 글쓰기 팝업을 띄우는 것이 아니었습니다.
버튼을 누르면 커뮤니티 리스트 페이지로 이동하게 되고,
그 다음 사용자가 그 페이지 안에서 다시 글쓰기 버튼을 눌러야
비로소 글쓰기 팝업이 열리는 구조였습니다.
즉, 사용자는 글을 쓰기 위해:
  1. 버튼 클릭 → 커뮤니티 페이지 이동
  2. 이동 후 글쓰기 버튼 클릭 → 팝업 열림
이렇게 두 번의 액션을 거쳐야 했습니다.

❗ 사용자 입장에서 이 흐름은 번거롭다

처음에는 페이지 전환 후 글쓰는 방식이 당연하게 느껴졌습니다.
하지만 실제로 사용 흐름을 따라가보면,
"글을 쓰고 싶어서 버튼을 눌렀는데 왜 바로 창이 안 뜨지?"
하는 심리적 불일치가 생길 수 있습니다.
이 흐름은 UX 관점에서 다음과 같은 문제를 가집니다:
  • 사용자 기대: “버튼을 누르면 바로 글쓰기 화면이 나올 거야”
  • 실제 동작: “일단 다른 페이지로 이동 → 다시 클릭해야 팝업 열림”
  • 결과: 기대-실제의 간극 발생 → 이탈 가능성 증가
이처럼 아주 사소한 흐름의 단절도,
사용자에게는 “귀찮음” 혹은 “혼란”으로 다가올 수 있습니다.

3. 사용자 의도를 한 번에 연결하고 싶었다

UX 관점에서 “첫 게시글 작성하러 가기” 버튼을 누른 사용자의 의도는 너무도 명확합니다.
“지금 바로 글을 쓰고 싶다.”
이처럼 행동의 목적이 명확한 사용자에게
두 번 클릭하게 하거나 다른 화면으로 보내는 건 불필요한 절차라고 판단했습니다.

❗ 흐름이 길어질수록 사용자는 이탈한다

사용자는 시스템 구조나 구현 방식을 고려하지 않습니다.
그저 “버튼을 누르면 글쓰기 창이 나올 거라고 기대”합니다.
하지만 기존 구조는 그 기대를 배반했습니다:
  • 중간에 다른 페이지로 전환되며 맥락이 끊기고
  • 다시 글쓰기 버튼을 찾는 과정에서 주의가 분산됩니다
  • 최악의 경우 “귀찮다”며 글쓰기를 포기할 수도 있습니다

그래서 결론은 하나

버튼을 누르면 바로 글쓰기 팝업이 열리게 하자.
UI는 사용자의 행동 흐름을 부드럽게 연결해주는 역할을 해야 합니다.
특히 무엇을 할지 이미 명확한 사용자의 흐름은
최소한의 클릭, 최소한의 경로로 설계해야 합니다.

4. 기술적으로는 아주 단순한 해결: URL 파라미터

앞서 말한 UX 문제를 해결하는 데 복잡한 구조 변경은 필요 없었습니다.
딱 한 줄의 조건 분기만 추가하면 충분했습니다.

핵심은 URL에 popup=true 를 붙이는 것

/community/list?popup=true
버튼을 클릭했을 때, 이 URL로 이동하게 만들고
그 페이지에서는 해당 파라미터를 감지해서 팝업을 자동으로 띄우면 되는 방식입니다.

실제 구현 코드

const params = new URLSearchParams(window.location.search);
if (params.has('popup') && params.get('popup') === 'true') {
  openCommunityWritePopup();
}
  • window.location.search: 현재 URL의 쿼리스트링을 가져옴
  • URLSearchParams: 파라미터를 쉽게 다루는 유틸
  • popup=true일 경우 openCommunityWritePopup() 호출

그럼 팝업 함수는 뭘 하냐?

function openCommunityWritePopup() {
  if (checkLoginYn() != "") {
    setCategory();
    getTmpCount(true);
    $("#communityPopupDiv").css("display", "flex");
    ...
  } else {
    loginQuestion();
  }
}
즉, 로그인 여부 확인 → 카테고리 초기화 → 임시저장 로딩 → 팝업 열기
까지 한 번에 수행합니다.
이 단순한 구조 덕분에, 사용자 입장에선 버튼 한 번으로 바로 글쓰기 화면에 진입할 수 있게 되었고,
기존의 중간 페이지 이동 + 팝업 버튼 클릭의 이중 절차는 사라졌습니다.

5. 결과: 클릭은 줄고 경험은 부드러워졌다

이 개선을 적용한 뒤, 사용자의 흐름은 단순해졌습니다.
이전에는:
  1. “첫 게시글 작성하러 가기” 버튼 클릭
  2. 커뮤니티 리스트 페이지로 이동
  3. 다시 글쓰기 버튼 클릭
  4. 팝업 열림
이제는:
  1. 버튼 클릭 → 팝업 바로 열림

클릭 수는 줄고, 몰입도는 높아졌다

  • 사용자는 한 번의 행동으로 곧바로 글쓰기에 진입할 수 있게 되었고,
  • 중간 페이지 전환이나 버튼 탐색 없이 집중도가 유지되었습니다.
특히 "글을 써보세요"라고 유도한 직후 바로 글쓰기 창이 뜬다는 점은
UX 측면에서도 아주 자연스럽고 직관적인 흐름이었습니다.

6. 마무리: 작은 개선이 전체 경험을 바꾼다

처음엔 단순히 “팝업을 좀 더 빨리 띄우면 좋겠다”는 생각이었습니다.
하지만 실제로 구현하고 나니, 사용자 경험 전체가 달라졌습니다.
버튼을 누르고 팝업이 바로 뜨는 것,
클릭 수를 줄이는 것,
기대에 맞춰 동작하는 UI를 만드는 것.
이 모든 건 별것 아닌 것처럼 보여도,
사용자 입장에서는 “기분 좋은 경험”으로 연결됩니다.

기술보다 중요한 것

이 경험을 통해 가장 크게 느낀 점은,
좋은 기능을 만드는 것보다 더 중요한 건 사용자의 의도를 읽고 연결하는 감각이라는 것이었습니다.
때로는 복잡한 기능보다,
단 하나의 클릭을 줄이는 것이 더 강력한 개선이 될 수 있습니다.

다음에도 이런 방식으로

이번 경험은 단지 하나의 버튼을 바꾼 작업이 아니라,
"사용자 흐름을 어디서 끊지 않고 이어줄 것인가"에 대한 고민이었습니다.
앞으로도 어떤 기능을 만들든,
"이걸 누른 사람은 무슨 생각으로 눌렀을까?"를 먼저 떠올릴 수 있는 개발자가 되고 싶습니다.