반응형에서 PC와 모바일 마크업을 따로 만들면 생기는 문제

PC와 모바일 화면의 차이가 크면 마크업을 각각 만들게 되는 경우가 있습니다.

단순히 개발자가 편해서 두 벌로 만드는 것은 아닙니다.

PC 디자인을 먼저 완성한 뒤 모바일 디자인을 다시 만들었는데, 정보의 순서와 묶음, 버튼 위치까지 모두 달라져 하나의 구조로 구현하기 어려운 경우가 많습니다.

처음에는 각 화면의 디자인을 자유롭게 표현할 수 있습니다. 하지만 같은 기능을 두 벌로 만들면 운영할 때 문제가 생깁니다.

두 벌로 만드는 것이 필요한 경우도 있다

PC와 모바일 마크업을 따로 만드는 선택이 항상 잘못된 것은 아닙니다.

디자인 자유도가 높고 화면 구조가 복잡하면 하나의 마크업으로 두 화면을 모두 표현하기 어려울 수 있습니다.

PC에서는 넓은 화면을 활용한 대시보드와 복잡한 편집 기능을 제공하고, 모바일에서는 핵심 작업만 빠르게 처리하도록 완전히 다른 흐름을 만들 수도 있습니다.

기존 PC와 모바일 디자인이 이미 확정됐지만, 공통 구조로 다시 설계할 일정이나 예산이 부족한 경우도 있습니다. 이때는 현실적으로 두 벌을 유지하면서 기능 누락을 막는 방법을 마련해야 합니다.

처음부터 다음과 같은 이유로 두 벌을 선택할 수도 있습니다.

• PC와 모바일에서 사용자의 업무가 다르다
• 두 화면의 정보 순서와 기능 구성이 크게 다르다
• 디자인을 다시 정리할 일정이나 예산이 없다
• 별도 화면의 관리 비용을 감수하기로 결정했다

이런 경우에는 두 벌로 만드는 이유와 관리 비용이 분명합니다.

이 글에서 말하는 문제는 한 벌로 충분히 구현할 수 있는데도 화면이 다르다는 이유만으로 마크업부터 나누는 경우입니다.

디자인을 따로 만들면 구조도 달라진다

PC 주문 상세 화면을 예로 들어보겠습니다.

넓은 화면에서는 다음 정보를 한 번에 보여줄 수 있습니다.

• 주문 정보
• 결제 정보
• 배송지
• 처리 이력
• 상태 변경과 환불 버튼

PC에서는 왼쪽에 주문 내용을 두고, 오른쪽에 결제와 배송 정보를 배치할 수 있습니다. 주요 버튼도 화면 위나 오른쪽에 놓을 수 있습니다.

이 디자인을 먼저 완성한 뒤 모바일 화면을 만들면 문제가 생깁니다.

좁은 화면에서는 오른쪽 패널을 그대로 둘 수 없습니다. 정보의 순서를 다시 정하고, 버튼을 화면 아래에 고정하거나 일부 내용을 접어야 합니다.

PC와 모바일의 구조가 너무 달라지면 CSS만으로 대응하기 어려워집니다. 결국 PC용과 모바일용 마크업을 따로 만들게 됩니다.

두 벌로 만들면 수정할 곳도 두 곳이다

React나 Vue를 사용하면 같은 데이터를 두 화면에 전달할 수 있습니다.

하지만 데이터가 같다고 화면 구조까지 하나가 되는 것은 아닙니다.

• PC용 컴포넌트와 스타일
• 모바일용 컴포넌트와 스타일
• 버튼과 링크의 위치
• 정보가 표시되는 순서
• 빈 화면과 오류 화면
• 키보드와 접근성 처리

주문 상태 항목을 추가하거나 버튼 이름을 바꾸면 양쪽을 모두 수정해야 합니다.

PC 화면에는 새 기능이 들어갔지만 모바일에는 빠질 수도 있습니다. 같은 기능인데 버튼 위치나 안내 문구가 달라질 수도 있습니다.

디자인 자유도를 얻는 대신 유지보수 범위가 커집니다.

테스트도 두 번 필요하다

구조가 다르면 화면별로 확인해야 합니다.

• 같은 정보가 표시되는가
• 같은 기능을 사용할 수 있는가
• 권한 조건이 같은가
• 빈 화면과 오류 화면이 준비됐는가
• 상태 변경 후 결과가 같은가

PC에서 잘 작동했다고 모바일도 같은 결과를 내는 것은 아닙니다.

개발뿐 아니라 기획, 디자인, QA의 확인 범위도 함께 늘어납니다.

모바일 퍼스트는 작은 화면의 구조를 먼저 정한다

마크업이 두 벌이 되는 문제는 디자인 순서와도 관련이 있습니다.

PC 화면을 먼저 만들면 넓은 공간에 많은 정보와 기능을 배치하게 됩니다. 그다음 모바일에서 무엇을 줄이고 어디로 옮길지 다시 고민해야 합니다.

모바일 퍼스트는 반대로 시작합니다.

작은 화면에서 먼저 다음을 정합니다.

• 사용자가 가장 먼저 확인할 정보
• 반드시 필요한 기능
• 콘텐츠를 읽는 순서
• 정보가 묶이는 기준

공간이 좁기 때문에 핵심 구조를 먼저 결정할 수밖에 없습니다.

이 구조가 안정되면 큰 화면으로 옮기기 쉬워집니다.

큰 화면에서는 같은 구조를 펼친다

모바일에서 주문 정보, 결제 정보, 배송지 순서가 정해졌다면 PC에서도 같은 순서를 유지할 수 있습니다.

화면이 넓어졌을 때는 구조를 새로 만들기보다 배치를 확장합니다.

• 세로로 쌓인 정보를 여러 열로 배치한다
• 아래에 있던 보조 정보를 옆 패널로 옮긴다
• 처리 이력이나 메모를 함께 보여준다
• 여러 동작을 한 줄에 펼쳐 보여준다

모바일에서 보조 정보를 접어서 보여줬다면 PC에서는 처음부터 펼쳐 보여줄 수도 있습니다.

핵심 콘텐츠와 기능은 같습니다. 화면이 넓어지면서 정보량과 배치만 확장됩니다.

이렇게 설계하면 공통 마크업을 유지하기 쉬워집니다.

큰 화면에 정보를 추가해도 기준은 같다

PC에서는 모바일보다 더 많은 정보를 보여줄 수 있습니다.

하지만 별도의 PC 화면을 새로 만드는 것과는 다릅니다.

모바일에는 주문 처리에 꼭 필요한 정보가 먼저 보이고, PC에는 같은 구조 위에 처리 이력, 내부 메모, 상세 결제 정보가 추가될 수 있습니다.

중요한 것은 모바일과 PC가 서로 다른 업무 흐름이 되지 않도록 하는 것입니다.

• 핵심 정보의 의미가 같은가
• 주요 기능이 양쪽에 모두 있는가
• 콘텐츠 순서가 크게 달라지지 않는가
• 추가 정보가 기존 구조를 깨뜨리지 않는가

큰 화면은 작은 화면을 대체하는 별도 화면이 아니라, 같은 화면을 더 넓게 사용하는 버전이어야 합니다.

두 벌을 선택했다면 관리 기준도 필요하다

일정이나 디자인 구조 때문에 두 벌을 유지해야 한다면 공통으로 관리할 부분을 먼저 정해야 합니다.

• 데이터와 업무 규칙은 한곳에서 관리한다
• 공통 버튼과 상태 표현은 같은 컴포넌트를 사용한다
• 기능을 추가할 때 PC와 모바일을 함께 확인한다
• 빈 화면, 오류, 권한 상태를 양쪽에서 테스트한다
• 두 화면의 기능 목록을 문서로 관리한다

마크업은 달라도 기능의 기준까지 달라져서는 안 됩니다.

그렇다고 항상 한 벌이 정답은 아니다

PC와 모바일에서 하는 업무 자체가 다르면 별도 화면이 필요할 수 있습니다.

PC에서는 여러 주문을 비교하고 한꺼번에 처리하지만, 모바일에서는 현장에서 주문 하나의 상태만 바꾸는 서비스가 있을 수 있습니다.

이 경우에는 같은 화면의 반응형 버전이라기보다 서로 다른 업무 도구에 가깝습니다.

별도 구조가 필요한 이유가 화면 크기인지, 업무 차이인지 구분해야 합니다.

디자인이 다르다는 이유만으로 두 벌을 선택하면 유지보수 비용만 늘어날 수 있습니다.

반응형은 작은 구조에서 확장하는 방식이다

반응형의 목표는 PC와 모바일 시안을 각각 따로 구현하는 것이 아닙니다.

작은 화면에서도 핵심 콘텐츠와 기능이 작동하는 구조를 먼저 만들고, 화면이 넓어질수록 정보와 배치를 자연스럽게 확장하는 것입니다.

PC 디자인을 먼저 복잡하게 만든 뒤 모바일을 다시 만들면 구조가 두 벌이 되기 쉽습니다.

모바일에서 핵심 구조를 먼저 정하면 큰 화면은 같은 구조를 바탕으로 확장할 수 있습니다.

이것이 모바일 퍼스트가 반응형 UI의 유지보수에 도움이 되는 이유입니다.

SLUR은 반응형 UI에서 하나의 구조로 대응할 수 있다면, 작은 화면을 기준으로 공통 구조를 설계하는 방향을 지향합니다. 큰 화면에서는 그 구조를 유지하면서 필요한 정보와 기능을 확장합니다.

다만 PC와 모바일의 업무와 기능이 본질적으로 다르다면 모바일 퍼스트만을 기준으로 삼지 않습니다. 이때는 각 환경에 맞는 별도 구조를 설계하되, 공통 기능과 운영 기준이 달라지지 않도록 관리합니다.