끝날 때까지 끝난 게 아니다

레거시 디자인 시스템의 습격과 다크모드

2026.05.29

끝날 때까지 끝난 게 아니다

#04
디자인 시스템의 습격과 lnb 구조 도입

기획 피벗을 마치고 본격적으로 하이파이(Hi-Fi) 단계에 돌입하려는데, 기존 디자인 시스템이 발목을 잡았습니다. 피그마로 구현은 되어 있었지만 오토레이아웃이 잡혀있지 않아 실무에 쓰기 애매했고, 이전 담당자분이 웹 퍼스트로 작업하신게 아니였는지 폰트나 컴포넌트 크기가 전체적으로 너무 거대했습니다. 무엇보다 브랜드 리뉴얼을 거치면서 기존의 노란색을 버리고 무채색 톤으로 가야 하는 명분이 있었습니다. 그대로 쓰기엔 무리가 있었죠.

결과적으로 이번 기회에 디자인 시스템을 새롭게 구축했습니다.
토큰부터 시작해서 스페이싱, 아이콘까지 새롭게 리뉴얼했습니다.

내비게이션 구조에도 큰 변화를 주었습니다.
기존에는 상단에 GNB가 고정되어 있었지만, 이번에는 '솔루션 중심의 UX'였기 때문에 유저가 화면 안의 콘텐츠에만 온전히 집중하길 바랐습니다.
과감하게 GNB를 없애고 필요할 때 숨길 수 있는 lnb 구조로 변경하여 몰입도를 높였습니다.

dd_article_07_a.png

Group_97.png

#05
게이트가 닫힌 순간 찾아온 반전, 다크모드

처음에는 기존 태니지먼트의 톤앤매너에 맞춰 라이트모드로 화면을 완성했습니다.
그런데 내부 리뷰를 진행하면서 팀원들이 피드백을 주셨습니다.

"화면이 예쁘긴 한데 약간 몰입감이 떨어지는 것 같아요. 첫 화면에 진입했을 때 신규든 기존 유저든 빡! 하는 임팩트를 느꼈으면 좋겠습니다."

사실 이 피드백이 나온 시점은 디자인 스프린트 2주를 다 쓰고 끝난 상태였습니다.
프로세스상 이미 게이트가 닫힌 타이밍이라 제가 더 이상 결과물을 수정할 수 없는 상황이었죠.
하지만 디자이너로서 이 피드백이 계속 뇌리에 맴돌았습니다. 신경이 쓰여서 가만히 있을 수가 없더라고요.

결국 혼자 이것저것 화면을 건드려보다가, 아예 톤을 다크모드로 확 뒤집어보았습니다.

이 시도가 신의 한 수가 되었습니다. 다음 날 화면을 본 팀원들의 반응은 그야말로 "앗, 이거다!"였습니다.
각 강점 아이콘들의 비주얼이 훨씬 선명하게 살았고, 진단 뷰 특유의 깊은 몰입감이 생겨났거든요.
결국 며칠의 일정을 더 태워 메인 화면을 다크모드로 최종 컨펌받고 마무리 지었습니다. (물론 안쪽 페이지들은 아직 레거시 시스템과 짬뽕되어 있어서, 앞으로 서비스 전체를 하나씩 리뉴얼하며 다크모드를 넓혀나갈 예정입니다. ㅎㅎ)

Viewed.png

Compared.png

Group_97.png

#06
이번 프로젝트를 통해 배운 점

UX 라이팅, 텍스트 한 줄이 만드는 마법

이번 스프린트를 통해 말 한마디가 사용자에게 미치는 영향력이 얼마나 거대한지 체감했습니다.
맨 마지막 화면의 메인 버튼(CTA) 문구를 처음에는 단순하게 [회원가입하기] 로 얹어두었었습니다.
그런데 PL님이 "이걸 [가입하고 무료 진단 받기] 로 바꾸면 어떨까요?" 의견을 주셨고, 문구를 변경하는 순간 저조차도 당장 누르고 싶어지는 마법을 경험했습니다.

실제 행동경제학 연구나 닐슨 노먼 그룹(NN/g)의 마이크로카피 분석에 따르면, 유저에게 가입이나 등록 같은 '단순 행위'를 요구하는 단어보다, 행동을 통해 얻을 수 있는 명확한 가치와 보상을 명시하는 '가치 중심적 CTA(Value-focused CTA)'가 전환율을 비약적으로 상승시킨다고 합니다. 디자인 레이아웃을 통째로 바꾸는 것만큼 단어 하나를 날카롭게 벼리는 게 중요하다는 걸 깊이 배웠습니다.

dd_article_07_d.png

Group_97.png

#에필로그
남겨둔 아쉬움, 그리고 내일의 퀘스트

이번 플젝을 통해 제 성향을 한 번 더 냉정하게 돌아보게 되었습니다.
나름 창조 강점이 있지만, 저는 아무것도 없는 백지 상태에서 0에서 1을 뚝딱 만드는 스타일은 아니더라고요.
확실한 기준이나 동료들의 빌드업(1)이 주어지면 그걸 100, 200까지 폭발적으로 디벨롭하는 데 강점이 있는 '슬로우 스타터(Slow Starter)'에 가깝습니다.

dd_article_07_e.png

그러다 보니 꼭 스프린트가 끝나갈 때쯤 뒤늦게 좋은 비주얼 아이디어들이 샘솟습니다.
사실 막판에 비주얼 임팩트를 확실하게 줄 수 있는 영상 요소와 AI 연출법을 새로 떠올렸었는데,
아직 제 AI 숙련도가 미흡하기도 하고 스프린트 타임라인을 너무 많이 넘길 것 같아 가슴속에 슬쩍 묻어두었습니다. 완벽하게 구현해 냈다면 진짜 멋진 결과물이 나왔을 텐데, 제 미흡함 때문에 다 보여주지 못한 것 같아 아쉬움이 남습니다.

다음 스텝에서는 이번에 시간 관계상 고치지 못했던 레거시 잔재들을 하나씩 세련되게 변경해 나갈 예정입니다.

그리고 얼마 전에 책을 보면서 혼자 머리를 탁 쳤던 힌트가 있는데요.
B2B 비즈니스는 실사용자만큼이나, 결제 라인에 있는 분들을 위한 스토리를 설득력 있게 잘 짜야 제품이 확장된다는 거였어요.

우리 서비스도 다음 단계에서는 인사담당자나 CEO분들이 들어왔을 때,
흔하디흔한 서비스 소개서 느낌이 아니라 "오, 이거 우리 팀 관리에 무조건 필요하겠는데?" 하고 눈이 번쩍 뜨일 만한 뷰를 만들어보고 싶어요.
단순 정보 나열이 아니라, 철저히 그들의 결핍을 긁어주는 솔루션 화면으로 말이죠!
이게 제 다음 스텝이자 욕심입니다.

아직 채워나가야 할 빈칸이 많지만, 할 일이 많다는 건 메이커로서 참 기분 좋은 일입니다. ㅎ
그럼 우당탕탕 첫 스프린트 회고는 여기서 마칩니다.
모두들 새로 바뀐 메인 화면 구경하러 가보세요! 안녕히! 🚀

Group_97.png

태니지먼트 심볼

Sync People, Strength Energy, Scale Synegy.

태니지먼트

TSUI 지수
373.50.0%