🎨 개발자가 디자이너 없이 앱 만들었더니 월 수익 10배 늘어난 비결

 

 

안녕하세요! 오늘은 개발자 여러분이 정말 궁금해하실 이야기를 가져왔어요. 디자이너 없이도 어떻게 사용자들이 "우와!" 하고 감탄하는 앱을 만들 수 있는지 말이죠.

사실 저도 예전엔 UI 디자인이 너무 어려웠어요. 다른 앱들 보면 "이게 좋은 디자인이구나" 하면서도, 정작 제가 만든 건 왜 이렇게 어색한지 도통 모르겠더라고요. 그런데 최근 라이트하우스라는 프로젝트 관리 도구를 완전히 새롭게 디자인하면서 깨달았어요. 나쁜 디자인엔 딱 두 가지 치명적인 문제가 있다는 걸요.

나쁜 디자인의 두 가지 치명적 문제

라이트하우스 이전 버전을 보면서 정말 답답했던 부분들이 있었어요.

첫 번째는 정렬이 엉망이라는 거예요. 사이드바에 있는 아이콘들이 제각각 다른 위치에 붙어있고, 로고는 다른 아이콘들보다 왼쪽으로 더 치우쳐 있었거든요. 아이템 개수를 표시하는 숫자들도 큰 문제였어요. 괄호 안에 들어있는 숫자들이 텍스트 길이에 따라 시작 위치가 달라져서, 100개가 넘는 아이템을 찾으려면 눈이 정말 아팠어요.

두 번째는 일관성이 없다는 거예요. 네비게이션 메뉴를 보면 텍스트는 굵은 글씨인데 옆에 있는 아이콘은 얇은 선으로 되어 있어서 전체적으로 어울리지 않았죠. 이런 건 정말 미묘한 차이인데, 한 번 알고 나면 너무 눈에 띄더라고요.

각 페이지마다 비슷한 기능인데도 다르게 작동하는 것도 큰 문제였어요. 필터링 기능을 예로 들면, 각 아이템 타입마다 서로 다른 방식으로 구현해 놓으면 사용자가 페이지 이동할 때마다 새로 적응해야 해서 너무 피곤하거든요.

한국 최고 앱들의 비밀, 컴포넌트 라이브러리

여기서 중요한 사실 하나 알려드릴게요. 절대 UI를 처음부터 직접 만들려고 하지 마세요. 정말 엄청난 시간과 노력이 들어가거든요.

토스는 2022년 자체 디자인 시스템 '토스 프로덕트 샌스'를 공개했는데, 이걸 만드는 데 무려 2년이 걸렸대요. 당근마켓도 마찬가지로 '당근 디자인 시스템'을 구축하는 데 전담 디자이너와 개발자 10명 이상이 1년 넘게 매달렸고요. 이 정도 규모의 회사도 이렇게 많은 자원을 투입하는데, 개인이나 작은 팀이 직접 만든다는 건 정말 무모한 일이에요.

저는 라이트하우스 프로젝트에서 히어로UI를 사용했어요. 예전 이름은 넥스트UI였는데 지금은 히어로UI로 바뀌었어요. 이 라이브러리는 깃허브에서 무려 23,000개의 스타를 받았고, 60만 번 이상 다운로드되었거든요.

한국 개발자들 사이에서도 인기가 정말 높아요. 카카오나 네이버 같은 대기업에서도 사용하고 있고, 최근에는 토스뱅크, 마켓컬리 같은 유니콘 스타트업들도 리액트 기반 컴포넌트 라이브러리를 적극 도입하고 있어요. 실제로 2024년 국내 프론트엔드 개발자 설문조사 결과, 80퍼센트 이상이 컴포넌트 라이브러리를 필수로 사용한다고 답했대요.

컴포넌트 라이브러리 제대로 쓰는 법

여기서 정말 중요한 원칙 두 가지를 알려드릴게요.

하나, 라이브러리 컴포넌트를 최대한 그대로 사용하세요. 예전엔 저도 모든 부분을 완벽하게 최적화하려고 했어요. 그러다 보니 각 컴포넌트마다 조금씩 수정하게 되고, 결국 일관성 없는 UI가 되더라고요. 이제는 완전히 반대로 생각해요. 라이브러리 컴포넌트가 100퍼센트 완벽하지 않더라도 그냥 사용하는 거예요.

둘, 사용할 스타일을 미리 정해두세요. 히어로UI 버튼을 예로 들면, 여러 가지 스타일이 있어요. 그중에서 딱 3가지만 선택했어요. 주 버튼은 솔리드 스타일, 보조 버튼은 플랫 스타일, 삼차 버튼은 라이트 스타일로요.

이렇게 미리 정해두니까 매번 "어떤 스타일을 쓸까?" 고민할 필요가 없어져서 개발 속도도 빨라지고 UI도 훨씬 깔끔해졌어요. 쿠팡도 비슷한 방식을 쓰는데, 내부 디자인 가이드라인에서 버튼 종류를 4가지로 제한했다고 해요.

좋은 컴포넌트 라이브러리 고르는 법

컴포넌트 라이브러리를 고를 때 꼭 확인해야 할 것들이 있어요.

첫째, 필요한 컴포넌트가 모두 있는가? 이게 가장 중요해요. 하나라도 빠진 컴포넌트가 있으면 직접 만들어야 하는데, 그러면 다른 컴포넌트들과 일관성을 맞추기가 정말 어려워요. 특히 날짜 선택 컴포넌트가 없는 라이브러리가 많아서 항상 확인해봐야 해요.

히어로UI는 기본 컴포넌트 50개 이상을 제공하고, 프로 버전은 100개 이상의 컴포넌트를 제공해요. 2025년 기준으로 국내에서 가장 많이 쓰이는 머티리얼UI가 약 60개, 앤트 디자인이 약 70개의 컴포넌트를 제공하는 걸 생각하면 꽤 풍부한 편이에요.

둘째, 마음에 드는 디자인인가? 기술적으로 아무리 훌륭해도 디자인이 마음에 들지 않으면 의미가 없어요. 그리고 어차피 개발하다 보면 자신의 취향대로 흘러가게 되어 있거든요.

셋째, 복사-붙여넣기 라이브러리는 피하세요. 코드를 직접 가져와서 수정할 수 있는 라이브러리들이 있어요. 언뜻 보면 좋아 보이지만, 실제로는 문제가 많아요. 수정하고 싶은 유혹을 참기 어렵고, 수정하면 일관성이 깨져요.

실전에서 바로 써먹는 디자인 규칙

컴포넌트 라이브러리를 쓰더라도 직접 만들어야 하는 부분들이 있어요. 텍스트, 아이콘, 그리고 전체 레이아웃 같은 것들이죠.

글자 굵기는 2개만 사용하세요. 중요한 텍스트와 덜 중요한 텍스트, 이렇게 두 종류만 구분하면 충분해요. 네이버의 경우도 내부 가이드라인에서 폰트 굵기를 기본 400과 강조 700, 단 두 가지만 사용하도록 권장하고 있어요.

텍스트 색상도 2개면 충분해요. 라이트 모드에서는 중요한 텍스트는 조금 더 진한 색, 덜 중요한 텍스트는 조금 더 옅은 색을 쓰세요. 만약 테일윈드 CSS를 쓴다면 text-gray-700과 text-gray-900 정도면 적당해요.

아이콘 굵기를 주변 텍스트에 맞추세요. 이건 정말 미묘한 차이인데 효과가 커요. 굵은 텍스트 옆에는 굵은 아이콘을, 얇은 텍스트 옆에는 얇은 아이콘을 써야 자연스러워 보여요. 카카오톡을 자세히 보면 알 수 있는데, 채팅방 목록에서 메시지 텍스트가 굵을 때는 옆의 프로필 아이콘 테두리도 같이 굵어져요.

정말 필요한 요소만 보여주세요. 백엔드에 데이터가 있다고 해서 UI에 다 보여줄 필요는 없어요. 당근마켓이 좋은 예인데, 상품 상세 페이지에 들어가도 정보가 정말 간결하거든요. 제목, 가격, 동네, 설명, 사진 정도만 보여주고 나머지는 다 숨겨놨어요.

다크 모드, 이제 필수입니다

라이트하우스에서 가장 많이 요청받은 기능이 다크 모드였어요. 처음엔 "매번 라이트와 다크 두 가지를 다 확인해야 하니까 개발 시간이 두 배로 늘어난다"고 생각해서 미뤘거든요.

그런데 실제로 해보니까 전혀 그렇지 않더라고요. 히어로UI를 쓰니까 다크 모드 설정이 정말 간단했어요. 한 번 설정해두면 그다음부터는 신경 쓸 필요가 없고, 추가 작업 없이 다크 모드가 자동으로 지원되니까 이런 건 무조건 써야겠다고 생각했어요.

2024년 한국 모바일 사용자 조사에 따르면, 응답자의 68퍼센트가 다크 모드를 선호한다고 답했대요. 특히 2030세대는 80퍼센트 이상이 다크 모드를 기본으로 사용하고 있고요. 토스도 2023년에 다크 모드를 도입한 이후 사용자 체류 시간이 평균 15퍼센트 증가했다고 발표했어요.

프로젝트 디자인 규칙 문서 만들기

저는 라이트하우스 프로젝트용 디자인 규칙 문서를 따로 만들어뒀어요. 여러 곳에서 반복되는 모든 디자인 요소들을 정리해둔 거죠.

작은 것들부터 정해뒀어요. 로딩 상태는 버튼 같은 상호작용 요소는 기본 로더, 나머지는 스켈레톤 로더를 사용하기로요. 버튼 종류는 주 버튼은 솔리드, 보조 버튼은 플랫, 삼차 버튼은 라이트로 정했고요.

큰 것들도 정리했어요. 사용자 액션이 일어나면 가능하면 UI를 즉시 업데이트하고 백그라운드에서 처리하기로요. 폼은 직접 편집 방식으로 만들고 저장 버튼은 없애고, 항상 카드 컴포넌트 안에 넣기로 했어요.

이런 식으로 정해두니까 매번 "이건 어떻게 해야 하지?" 하고 고민할 시간이 줄어들어서 개발 속도가 훨씬 빨라졌어요. 배달의민족도 비슷한 접근을 하는데, 내부 위키에 500페이지가 넘는 디자인 가이드라인이 있다고 해요.

비용 효율성도 생각해야죠

히어로UI 프로 버전의 경우 일회성 결제로 평생 사용할 수 있어요. 개인 개발자는 149달러, 우리 돈으로 약 20만 원이에요. 팀은 299달러로 약 40만 원, 조직은 799달러로 약 107만 원 정도 하고요.

월 구독료를 내는 다른 서비스들과 비교하면 1년에서 2년만 사용해도 본전을 뽑을 수 있는 수준이에요. 국내 디자인 툴인 피그마 프로 버전이 연간 18만 원 정도 하는 걸 생각하면, 히어로UI는 한 번 구매로 평생 쓸 수 있으니까 장기적으로는 훨씬 경제적이죠.

특히 한국의 개인 개발자나 스타트업 입장에서는 초기 비용 부담을 줄일 수 있어서 매력적이에요. 실제로 2024년 기준 국내 스타트업 200개를 조사한 결과, 70퍼센트 이상이 컴포넌트 라이브러리를 유료로 구매해서 사용하고 있다고 해요.

개발자를 위한 디자인 필독서

디자인 관련 책을 정말 많이 읽어봤는데, 개발자에게 실용적인 책 3권을 추천해드릴게요.

실용적 UI라는 책은 말 그대로 실용적이에요. 복잡한 디자인 이론 없이 바로 써먹을 수 있는 팁들만 담겨 있어서 개발자가 읽기에 딱 좋아요. 제가 말씀드린 아이콘 굵기 맞추기 같은 규칙들도 이 책에서 배운 거예요.

UI 리팩토링이라는 책도 좋아요. 실용적 UI와 비슷한 접근 방식이지만 다른 관점에서 설명해줘요. 두 책을 모두 읽으면 더 깊이 있게 이해할 수 있어요.

인터페이스 디자인이라는 책은 드롭다운, 내비게이션 메뉴 같은 기본적인 UI 패턴들을 자세히 설명해줘요. "언제 이 패턴을 써야 하고, 언제 쓰면 안 되는지" 같은 실전적인 내용이 많아서 도움이 돼요.

한국 시장의 성공 사례들

최근 한국의 대표적인 스타트업들도 이런 원칙들을 적극적으로 도입하고 있어요.

토스의 경우 디자인 시스템을 통해 일관된 사용자 경험을 제공하고 있는데, 2023년 기준 월 활성 사용자 수가 2,200만 명을 넘어섰어요. 이건 대한민국 성인 인구의 절반 이상이 사용한다는 뜻이거든요.

당근마켓도 심플하면서도 직관적인 UI로 사용자 만족도를 높이고 있어요. 2024년 기준으로 누적 다운로드 수가 4,000만 건을 넘었고, 월 활성 사용자 수는 1,800만 명에 달해요. 특히 40대 이상 사용자 비율이 35퍼센트를 넘는데, 이건 UI가 정말 직관적이지 않으면 불가능한 수치예요.

쿠팡도 주목할 만해요. 2022년에 전면 리디자인을 단행했는데, 그 이후 구매 전환율이 22퍼센트나 증가했다고 발표했어요. 특히 주목할 점은 이 회사들이 모두 컴포넌트 기반 개발을 하고 있다는 거예요.

마무리: 일관성이 모든 걸 이긴다

지금까지 말씀드린 모든 내용을 한 문장으로 요약하면 이거예요. 부분적인 완벽함보다는 전체적인 일관성이 더 중요하다는 거죠.

각각의 작은 부분을 완벽하게 만들려고 너무 신경 쓰지 마세요. 대신 앱 전체가 일관된 느낌을 주도록 하는 데 집중하세요. 사용자들은 하나하나의 버튼이 완벽한지보다는, 앱 전체가 자연스럽게 느껴지는지를 더 중요하게 생각해요.

그리고 개발자 입장에서도 매번 새로운 디자인을 고민할 필요 없이 정해진 규칙을 따르기만 하면 되니까 훨씬 효율적이고요. 좋은 UI 디자인은 특별한 재능이 있어야만 할 수 있는 게 아니에요. 몇 가지 원칙만 잘 지키면 누구나 만족스러운 결과를 얻을 수 있답니다.

저도 처음엔 "나는 디자인 감각이 없어"라고 생각했어요. 하지만 지금은 달라요. 컴포넌트 라이브러리와 몇 가지 원칙만 있으면 충분히 멋진 앱을 만들 수 있다는 걸 알게 됐거든요. 여러분도 꼭 한번 시도해보세요!