"UI/UX 고도화"라는 말을 들으면 화면을 다시 예쁘게 만드는 일을 떠올리시는 경우가 많습니다. 그런데 저희가 실제로 하는 일의 절반 이상은 화면을 그리기 전에 끝납니다.
B2B SaaS는 홈페이지와 근본적으로 다른 물건입니다. 홈페이지는 한 번 보고 판단하는 곳이고, SaaS는 같은 사람이 매일 몇 시간씩 쓰는 도구입니다. 이 차이가 설계 방식 전체를 바꿉니다.
30초 요약
- •고도화는 리디자인이 아닙니다. 구조를 다시 세우는 일이고, 화면은 그 결과로 바뀝니다.
- •SaaS는 반복 사용·학습·권한·데이터 밀도 네 가지 때문에 홈페이지와 설계 원리가 다릅니다.
- •기능을 더할수록 안 쓰이는 현상이 나타나면 구조 문제입니다. 화면을 고쳐도 안 낫습니다.
- •작업 순서는 IA → 대시보드 → 어드민 → 온보딩 → 디자인 시스템 입니다. 순서를 바꾸면 두 번 일하게 됩니다.
- •디자인 시스템을 먼저 만들면 대부분 실패합니다. 무엇을 담을지 모르는 상태에서 그릇부터 만드는 셈이라서요.
1. 고도화는 리디자인이 아닙니다
이 둘을 구분하지 않으면 돈을 쓰고도 같은 문제가 남습니다. 차이는 이렇습니다.
리디자인 — 지금 있는 화면을 더 보기 좋게 만든다
고도화 — 무엇을 어디에 두어야 하는지부터 다시 정한다
리디자인은 화면 수가 그대로입니다. 고도화는 화면이 합쳐지거나 사라지거나 새로 생깁니다. 저희가 맡은 프로젝트에서 메뉴가 절반으로 줄어든 적도 있습니다. 기능을 뺀 게 아니라, 원래 한 화면에 있어야 할 것들이 흩어져 있었던 겁니다.
그래서 "화면 몇 개 작업해 주세요"라는 요청으로 시작하면 고도화가 안 됩니다. 화면 개수는 결과이지 조건이 아니기 때문입니다.
2. SaaS가 홈페이지와 다른 네 가지
① 같은 사람이 반복해서 씁니다
홈페이지 방문자는 대부분 처음 온 사람입니다. 그래서 친절한 설명이 중요합니다. 반면 SaaS 사용자는 어제도 썼고 내일도 씁니다. 처음에 도움이 되던 설명이 3일 뒤에는 방해물이 됩니다. 초보와 숙련자를 같은 화면에서 동시에 만족시켜야 합니다.
② 학습이 일어납니다
사용자는 제품을 배웁니다. 그래서 일관성이 미학이 아니라 기능이 됩니다. 같은 동작이 화면마다 다른 자리에 있으면 사용자는 매번 다시 찾아야 하고, 그 비용이 매일 쌓입니다.
③ 권한이 다릅니다
관리자, 일반 사용자, 외부 협력사가 같은 제품을 다르게 봅니다. 이걸 나중에 붙이면 조건문이 화면마다 흩어지고, 결국 아무도 전체 그림을 모르는 상태가 됩니다. 권한 구조는 IA 단계에서 정해야 합니다.
④ 데이터가 빽빽합니다
홈페이지는 여백이 미덕이지만 SaaS는 다릅니다. 하루 종일 쓰는 사람에게 스크롤은 비용입니다. 정보 밀도를 높이면서도 읽히게 만드는 것이 SaaS 디자인의 핵심 난이도입니다.
3. 고도화가 필요하다는 신호
아래 중 두 개 이상이면 화면이 아니라 구조를 봐야 할 시점입니다.
- •기능을 추가했는데 사용률이 안 오릅니다 — 새 기능이 기존 구조 어디에도 자연스럽게 안 들어간 겁니다
- •고객 문의의 상당수가 "어디 있나요"입니다 — 기능은 있는데 찾지 못하는 상태입니다
- •온보딩을 마친 사용자가 2주 안에 안 돌아옵니다 — 첫 성공 경험까지 도달하지 못한 겁니다
- •관리자가 DB를 직접 열어 수정합니다 — 어드민이 실제 업무를 못 받치고 있습니다
- •같은 버튼이 화면마다 다르게 생겼습니다 — 디자인 시스템 부재이자, 그 자체로 개발 속도를 갉아먹습니다
4. 작업 순서 — 이 순서를 지켜야 합니다
고도화 프로젝트가 실패하는 가장 흔한 이유가 순서를 뒤집는 것입니다. 저희가 쓰는 순서는 이렇습니다.
① IA 재설계
무엇이 어디에 속하는지, 사용자가 어떤 경로로 목적에 도달하는지를 정합니다. 여기서 결정된 것이 나머지 전부를 규정합니다. 자세한 내용은 SaaS 제품이 커질수록 사용자가 길을 잃는 이유에서 다룹니다.
② 핵심 대시보드
사용자가 가장 자주 보는 화면입니다. 여기서 흔한 실수가 지표를 많이 넣는 것인데, 지표가 늘수록 아무도 안 보게 됩니다. 이유는 SaaS 대시보드, 지표를 늘릴수록 안 쓰이는 이유에 정리했습니다.
③ 어드민
가장 미뤄지고 가장 비싸게 돌아오는 영역입니다. 어드민이 부실하면 운영 인력이 그 부족분을 수작업으로 메웁니다. 그 비용은 매달 나갑니다. 관리자 페이지를 나중으로 미루면 생기는 일에서 실제 사례를 다뤘습니다.
④ 온보딩
제품이 정리된 뒤에 설계해야 합니다. 구조가 흔들리는 상태에서 만든 온보딩은 구조가 바뀌는 순간 전부 다시 만들어야 합니다. SaaS 온보딩 이탈이 생기는 3구간을 참고하세요.
⑤ 디자인 시스템
마지막입니다. 무엇을 만들지 모르는 상태에서 컴포넌트부터 만들면 대부분 버려집니다. 실제로 쓰인 화면들에서 반복되는 패턴을 뽑아내는 방식이라야 살아남습니다.
5. 자주 보는 오해 세 가지
"일단 디자인 시스템부터 만들면 빨라지지 않나요"
반대인 경우가 더 많습니다. 시스템은 반복에서 뽑아내는 것이라, 반복이 생기기 전에 만들면 추측으로 만들게 됩니다. 그렇게 만든 컴포넌트는 실제 화면에 안 맞아서 결국 예외 처리가 쌓입니다.
"경쟁사 화면을 참고하면 되지 않나요"
참고는 유용하지만 복제는 위험합니다. 경쟁사의 화면은 그 회사의 데이터 구조와 권한 모델 위에 세워진 결과물입니다. 겉모습만 가져오면 우리 구조와 충돌합니다.
"개발이 끝난 뒤에 디자인을 붙이면 안 되나요"
됩니다. 다만 그건 고도화가 아니라 도색입니다. 구조 문제는 그대로 남고, 6개월 뒤에 같은 논의를 다시 하시게 됩니다.
6. 기간과 비용에 대해
정직하게 말씀드리면 범위에 따라 크게 달라져서 단일 금액을 적기 어렵습니다. 다만 판단에 도움이 될 기준은 드릴 수 있습니다.
- •IA 재설계만 — 화면을 그리지 않고 구조와 흐름만 정리합니다. 가장 짧고, 가장 효과가 큽니다
- •IA + 핵심 화면 — 대시보드와 주요 플로우까지. 가장 많이 선택하시는 범위입니다
- •전체 고도화 — 어드민과 디자인 시스템까지 포함. 제품 규모에 따라 기간이 크게 달라집니다
처음부터 전체를 맡기실 필요는 없습니다. 오히려 IA 재설계만 먼저 해보시고 결과를 보고 판단하시는 편을 권합니다. 구조가 정리되면 그 다음에 무엇이 필요한지가 저절로 보입니다. 어디까지 맡기고 무엇을 안에 남길지는 B2B SaaS UI/UX 외주, 어디까지 맡기고 무엇을 남겨야 하나에서 따로 다뤘습니다.
자주 묻는 질문
개발자가 없어도 진행할 수 있나요?
IA 재설계와 화면 설계까지는 가능합니다. 다만 구현 단계에서는 개발 인력이 필요하고, 저희가 함께 진행하는 경우도 있습니다. 어느 쪽이든 설계 산출물이 개발자에게 그대로 넘어갈 수 있는 형태로 만듭니다.
이미 개발이 많이 진행됐는데 늦지 않았나요?
늦지 않았습니다. 오히려 실제 사용 데이터가 쌓인 상태라 근거를 가지고 판단할 수 있습니다. 다만 구조를 바꾸면 개발 재작업이 생기므로, 무엇을 바꾸고 무엇을 남길지 먼저 합의하고 시작합니다.
디자인만 받고 개발은 내부에서 해도 되나요?
가능합니다. 그 경우 산출물의 형태가 중요해집니다. 화면 이미지만 넘기면 구현 과정에서 의도가 흩어지므로, 컴포넌트 규칙과 상태 정의까지 문서로 함께 드립니다.
기존 디자이너가 있는데도 외부에 맡기는 이유가 있나요?
내부 디자이너는 제품을 가장 잘 알지만, 그래서 지금 구조를 당연하게 여기기 쉽습니다. 구조를 의심하는 일은 밖에서 하는 편이 빠르고, 그 이후의 유지와 확장은 내부가 훨씬 잘합니다. 역할을 그렇게 나누시는 걸 권합니다.
정리하면
B2B SaaS UI/UX 고도화는 화면을 예쁘게 만드는 일이 아니라 제품의 구조를 다시 세우는 일입니다.
IA부터 시작해서 대시보드, 어드민, 온보딩을 거쳐 디자인 시스템으로 끝내는 순서를 지키시면, 같은 예산으로 전혀 다른 결과가 나옵니다. 그리고 그 시작은 전체 발주가 아니라 구조 진단 하나로도 충분합니다.
함께 읽으면 좋은 글
제품 구조부터 점검이 필요하시면 상담 신청을 남겨주세요. 범위와 예상 기간을 먼저 정리해 드립니다. 진행 방식과 포함 범위는 요금제 페이지에서 확인하실 수 있습니다.
이 글은 EasySpark 허수진 대표의 실무 내용이며, 제품 단계와 조직 구성에 따라 다를 수 있어 결과를 보장하지 않습니다. 우리 제품에 맞는 개선 방향이 궁금하시다면 편하게 상담 신청해주세요.
