빌더 헤더에 앱 바로가기 링크 추가로 컨텍스트 전환 해소

빌더 헤더에 'Open app' 링크를 추가했다.

작업 자체는 단순해 보이는데, 사실 이 한 줄짜리 링크가 생기기까지 팀 내에서 꽤 오랫동안 이야기가 오갔다. 빌더 화면에서 작업하다 보면 "지금 만들고 있는 게 실제로 어떻게 보이지?"라는 질문이 자연스럽게 생기는데, 그걸 확인하려면 매번 URL을 복사해서 새 탭 열고, 프로젝트 ID 맞춰서 이동하고... 이런 흐름이 반복됐다. UX 관점에서 보면 전형적인 컨텍스트 스위칭 비용이다.

왜 헤더였나

처음엔 사이드바나 툴바 쪽에 넣자는 의견도 있었다. 근데 헤더로 결론이 난 건 단순한 이유다 — 빌더를 쓰는 사람이 "앱 열기"라는 행동을 어디서 찾겠냐고 생각했을 때, 헤더가 가장 직관적인 위치였음. 사이드바는 구조 편집이나 컴포넌트 탐색에 집중하는 공간이고, 툴바는 현재 작업 상태를 제어하는 공간이라 맥락이 달랐다.

헤더는 전역 액션 — 저장, 공유, 미리보기, 배포 같은 것들이 모이는 곳이라 'Open app'도 거기 속하는 게 자연스러웠다. 위치 결정이 "어디가 예쁘냐"가 아니라 "사용자가 어디서 찾겠냐"로 흘러가야 한다는 걸 이번에도 다시 확인했음.

변경 파일과 그 의미

apps/web/src/app/projects/[projectId]/page.tsx

[projectId]가 dynamic segment로 박혀 있는 걸 보면, 이 페이지가 프로젝트 단위로 라우팅되는 빌더 메인 화면이라는 걸 알 수 있다. 링크를 추가한다는 게 단순히 <a href=""> 하나 박는 게 아니라, 현재 프로젝트 컨텍스트에서 올바른 앱 URL을 구성하는 로직이 같이 들어간다는 뜻이다.

// 대략 이런 패턴
const appUrl = buildAppUrl(projectId); // projectId에서 URL 구성

<header>
  {/* 기존 헤더 요소들 */}
  <a href={appUrl} target="_blank" rel="noopener noreferrer">
    Open app
  </a>
</header>

target="_blank"와 rel="noopener noreferrer" 조합은 보안상 거의 필수다. 특히 외부로 열리는 링크에 noopener 없이 나가면 열린 탭에서 window.opener를 통해 원래 탭에 접근할 수 있는 취약점이 생긴다. 이런 디테일은 코드리뷰에서 종종 빠지는 부분인데, 빌더처럼 외부 앱을 여는 링크라면 반드시 챙겨야 한다.

작은 기능, 큰 흐름

이런 류의 작업이 팀 입장에서 가끔 "이게 백로그에 있어야 하는 일인가?" 싶을 정도로 우선순위 경쟁에서 밀리는 경우가 있다. 근데 반복적인 컨텍스트 스위칭은 개발자뿐 아니라 빌더를 쓰는 모든 사용자의 시간을 갉아먹는다. 작게 보이는 UX 개선이 실제 작업 흐름에서 누적 효과를 낸다는 걸 팀원들한테도 자주 이야기하는 편이다.

이 작업을 직접 짜면서도 "이게 얼마나 자주 쓰이겠어"라는 생각이 스쳤는데, 그게 함정이다. 기능의 가치는 사용 빈도보다 "없을 때 얼마나 불편한가"로 판단해야 할 때가 있다. 없으면 매번 돌아가야 하는 경로, 있으면 자연스럽게 흘러가는 경로 — 그 차이가 결국 빌더 전체 경험의 질을 만든다.

다음엔 이 링크에 배포 상태 indicator를 붙이는 것도 고려 중이다. 링크를 눌렀을 때 최신 배포가 반영된 앱인지, 아직 반영 전인지 모르면 또 다른 혼란이 생길 수 있기 때문이다. 헤더 한 줄이 생겼는데, 거기서 파생되는 이야기가 꽤 된다.

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

• 기계식키보드 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

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