들어가기 전에

이 포스팅은 Josh Comeau 가 작성한 You don't need A UI Framework 를 번역, 직역한 글입니다.

저도 React 개발을 처음 진행할 때는 MUI 를 많이 썼는데, 개발에 익숙해진 최근에 들어서야 이거 불편한데? 라는 생각이 들기 시작했습니다. 그래서 그런지 공감이 되면서도 앞으로의 개발 방식에 좋은 방향성을 잡아줬던 글이라 첫 번역을 해봅니다.

예전에도 그랬지만 지금도 몇몇 사람들이 추천하는 UI 프레임워크가 있냐고 물어봅니다. "UI 프레임워크" 는 스타일링이 된 UI 컴포넌트를 제공하는 서드파티 패키지를 의미합니다. Bootstrap 과 같이 CSS 프레임워크나, MUI 와 Ant Design 같은 JS 컴포넌트 라이브러리가 여기에 속합니다.

이런 질문에 대한 제 대답은 사람들을 놀라게 만듭니다. : 사용하지 마세요, 그리고 소비자가 있는 상품에도 사용하면 안된다고 생각해요.

확실하게 하고 가죠. 저는 이 도구들에 아무런 악감정도 없고, 분명 유용한 사용 방법이 있다고 생각합니다. 하지만 저는 이 도구들을 사용하면 쉽게 문제를 해결할 수 있다던가, Application 을 쉽게 만들수 있다던가 하는 말도 안되는 기대감에 사용하는 개발자들을 정말 많이 봤습니다.

이 글에서는, 왜 이런 도구들이 필요하지 않은 이유를 설명하겠습니다. 또한 디자인 경험 없이 전문가 수준으로 보이는 Application 을 제작할 수 있는 제 전략을 공유하겠습니다.

UI 프레임워크이 끌리는 이유

개발자들이 UI 프레임워크를 찾는 이유는 많습니다. 제가 봤던 가장 많았던 3가지 이유입니다 :

1. Application 이나 사이트가 디자인이 멋지고 전문적으로 보였으면 한다. 그리고 이 도구들은 잘 디자인된 UI 컴포넌트를 제공해준다.

2. 처음부터 하나하나 모든 것을 만드는데 시간을 들이지 않고 빨리 뭔가를 만들어 내고 싶다.

3. 모달 창, 드롭다운, 툴팁과 같은 많은 UI 프레임워크들은 접근성까지 생각한다면 잘 만들기가 정말 어렵다. 그래서 잘 만들고 싶다.

이런 것들을 원한다는 건 정말 합당하고, 이런 문제를 위한 해결법을 찾는데 매력적이라는 건 이해합니다. 하지만 몇몇 경우에는 기대와 현실이 일치하지 않는 경우가 있다고 생각합니다. 다른 사람들에게는 문제를 해결하기 위한 더 나은 도구들이 있다고 생각합니다.

하나씩 짚어봅시다.

전문가 수준의 디자인

첫번째 이유가 가장 많이 보이는 이유일겁니다. 뭔가 만들고 싶은데 디자인 경험이 없는 개발자들이 정말 많기 때문이죠. 디자인을 배우는데 몇년을 쓰는 거보다는 정말 잘 디자인된 컴포넌트를 바로 제공해주는 서드파티 패키지를 사용하면 되잖아요?

이게 문젭니다. 제 생각에는 : 디자인은 멋있게 보이는 조각들로 만들어본다고 어떻게 되는 것이 아닙니다. (원문 : 디자인은 멋있게 보이는 조각들 훨씬 그 이상입니다. )

얼마 전에, 저는 LEGO 닌텐도 게임기를 선물로 받았습니다. 만들면서 정말 재밌었습니다. 레고를 좋아한다면 한번 찾아보는걸 추천해요!

그런데 말하고 싶은건 이겁니다. : 블록을 어디에 정확하게 배치해야 하는지 알려주는 200 페이지 책이 키트와 함께 딸려왔기 때문에, 제가 이 모델을 만들 수 있었던 겁니다.

제작법이 없이 이 조각들을 맞추라고 했었다면, 제 NES는 원래보다 훨씬 안 좋아 보일겁니다. 하이 퀄러티의 블록을 갖고만 있는 건 충분하지 않습니다. 어떻게 사용해야 하는지도 알아야 합니다.

컴포넌트 라이브러리는 멋진 버튼, 데이트피커, 페이징 위젯도 제공해줍니다. 하지만 이걸 조립하는 건 당신의 몫입니다.

머태리얼 디자인과 같은 디자인 시스템 기반의 블록들은 전문가 디자인 팀이 만들었습니다. 이 팀은 프레임워크도 이해하고 있고, 이 조각들을 아름다운 인터페이스로 조립할 수 있는 능력이 있습니다. 우리도 똑같은 조각들을 받을 수 있지만, 그게 똑같은 결과를 얻을 수 있다는 걸 의미하지는 않습니다.

어떤 디저이너가 구글 머태리얼 디자인 기반 Application 을 좋아 보이게 만들 수 있는 건 구글 밖에 없다고 말한 것이 기억이 납니다. 안드로이드 앱스토어에도 똑같은 전문가 수준의 디자인 컴포넌트를 사용했지만, 하나도 전문가처럼 보이지 않는 서드파티 Application 들이 많습니다.

좋은 디자인을 위해 빠질 수 없는 요소들이 너무나도 많습니다. - 균형, 여백, 정합성과 같은 것들 말이죠. 컴포넌트 라이브러리를 효율적으로 사용하기 위해서는, 그걸 만든 디자이너 입장을 알고 컴포넌트들이 어떻게 배치되어야 하는지 이해할 필요가 있습니다.

덧붙여서, 라이버리라가 얼마나 포괄적이라 하더라도, 당신이 필요한 모든 조각을 갖고 있을 수는 없습니다. 모든 Application 과 사이트는 유일하기 때문에, 항상 특이한 요구사항이 있습니다. 이미 존재하는 서드파티 디자인 시스템과 "잘 섞이는" 새로운 컴포넌트를 만드는 것은 정말 더럽게 어렵습니다.

불가능하다고는 생각하지 않습니다. - 써드파티 스타일을 가지고 전문가 수준의 Application 을 만들어낸 예시도 있다고 장담합니다. 그렇지만 당신이 잘 만들 수 있다는 건, 그건 이미 디자인 감각이 있었다는 뜻이고 이런 도구들이 처음부터 필요하지 않았습니다.

저는 디자인 감각 없이 전문적으로 보이는 프로젝트를 시작하고 싶어하는 개발자들에게 공감하는 바입니다... 하지만 제가 봐왔던 바로는, 보통 그렇게 되지는 않더라고요.

시간 절약

UI 프레임워크가 시간을 절약하는데 도움이 된다는 것이 제가 들었던 다음 이유입니다. 처음부터 전체 컴포넌트 라이브러리 만드는 건 확실히 힘든 일이고, UI 프레임워크에 의존하면 하지 않아도 되는 부분입니다.

일리가 있지만, 제가 지금까지 봐왔던 바로는, 토끼와 거북이 상황인 경우가 많습니다.

저는 콘코디아 대학에서 학생들의 부트캠프를 위한 웹 개발 기초를 몇 년동안 가르쳤습니다. 그 프로그램은 2주 동안의 개인 프로젝트로 마무리되는 방식이었습니다. 학생들은 무엇을 만들지 결정하고 그것을 하는 건 그들에게 달려있습니다. 교사로서 저는 질문에 대답하고, 막히는 부분이 있을 때 도와주었습니다.

하나의 트렌드를 발견했습니다 : Bootstrap 과 MUI 와 같은 UI 프레임워크를 선택한 학생들은 일찍 시작하고 처음 며칠동안에는 빠르게 진행을 해나갑니다. 하지만 시간이 지날수록, 그들은 수렁에 빠집니다. 그들이 필요한 것과 컴포넌트 라이브러리가 제공하는 것 사이에서 일광이 커지고, 그 컴포넌트들을 알맞은 모양으로 만들어가기 위해 너무 많은 시간을 소비하게 됩니다.

네비게이션 기능을 만들기 위해 CSS 프레임워크에서 가져온 마스트헤드를 수정하는데 오후 전체를 썼던 한 학생도 기억이 납니다. 결국에 그들은 서드파티 컴포넌트를 버리기로 결정했고, 10분만에 대책안을 구상했습니다.

자신만의 스타일을 작성하는 건 글쓰기 시험과 같은 느낌이 듭니다. 처음에는 약간 느릴수 있지만, 처음에 노력한 만큼의 성과를 거둘 수 있습니다. 장기적으로 보자면 많은 시간, 에너지, 좌절감을 절약할 수 있습니다.

사용성과 접근성

제가 들었던 마지막 이유는 엄청 타당합니다. 웹은 모달, 드롭다운, 툴팁과 같은 강력한 "표준 라이브러리" 가 있지 않습니다. 마우스 사용자, 키보드 사용자, 그리고 스크린리더 사용자 모두에게 잘 작동하는 모달 화면을 만드는 것은 엄청나게 어렵습니다.

UI 프레임워크는 사용성과 접근성 입장에서 봤을 때는 모 아니면 도 입니다. 몇몇 라이브러리는 이쪽 방면에서 꽤 우수하지만, 대부분의 경우 부가적인 초점에 불과합니다.

고맙게도, 여러 스타일을 미리 지정하지 않고 사용성과 접근성에만 초점을 맞춘, 또 다른 카테고리들이 있습니다.

이 카테고리에 속한 제가 좋아하는 몇가지 도구들입니다 :

• Reach UI

  React 를 위한 접근성에 초잠을 맞춘 프리미티브들입니다. React Router 와 Remix 의 공동 제작자인 Ryan Florence 가 만들었습니다.

• Headless UI

  React, Vue 를 위한 스타일이 없고, 완벽히 접근이 가능한 UI 컴포넌트들입니다. Tailwind 팀이 제작, 유지하고 있습니다.

• Radix Primitives

  React 를 위한 스타일이 없고, 접근성에 초점을 맞춘 컴포넌트 집합입니다. 이 라이브러리에는 매우 광범위환 컴포넌트들과 정말 깔끔한 것들이 많습니다!

• React ARIA

  접근성이 있는 컴포넌트를 처음부터 만들 때 사용할 수 있는 React Hook 라이브러리 입니다.

2022년에 와서는 모달 화면을 처음부터 만드는 사람이 있어서는 안됩니다. 하지만 그렇다고 스타일이 포함된 엄청난 UI 프레임워크가 필요한 것도 아닙니다! 가장 중요한 접근성 문제를 정확하게 해결하는 동시에, 디자인 및 스타일과 관련해서 완전히 불가지론적인 상태를 유지하는 도구들이 있습니다.

반론들

이 주제애 대해서 몇년 동안 다른 개발자들과 이야기를 나누었었는데, 꽤 설득력 있는 반론을 들었습니다.

친숙함

첫 번째로, Danial Schutzsmith 는 Bootstrap 과 같은 "기업 표준" 도구는 한 가지 큰 장점이 있다고 지적했습니다 : 친숙함입니다.

널리 알려진 도구를 사용하면, 개발자와 디자이너를 새로 온보딩하는 것이 쉬워집니다. 새로운 팀원들은 커스텀 프레임워크를 익히는 데에 많은 시간을 할애할 필요가 없습니다.

많은 단기, 중기 프로젝트를 수행하는 에이전시의 입장에서 이는 충분히 이해가 될 것입니다. 그들은 모든 새로운 프로젝트를 제로 베이스에서 시작할 필요가 없습니다. 그리고 팀원들이 점점 도구에 익숙해지면서, 도구를 정말 효율적으로 사용하는 방법을 배웁니다.

제가 에이전시에서는 일을 많이 해보지 않아서 뭐라 말씀드리기가 어렵습니다. 제 대부분의 경력은 제품 회사에서 일한 경력입니다. 제가 일한 곳 어느 곳에서도 서드파티 UI 프레임워크를 사용한 곳이 없습니다. 저희는 항상 사내에서 무언가를 만들었습니다. (예 : Khan Academy 의 Wonder Blocks, DigitalOcean 의 Walrus)

내부 도구

내부 도구 나 다른 비공개 프로젝트 (예 : 프로토타입) 를 구축할 때에는 UI 프레임워크를 사용하는 것이 합리적이라고 생각합니다.

목표가 무언가를 빠르게 시작하고 실행하는 것이고 UI가 100% 전문적이지 않아도 된다면, 많은 서드파티 컴포넌트를 빠르게 추가해서 시간을 절약할 수 있다고 생각합니다.

Tailwind 와 Chakra UI 는 어떻죠?

저는 Tailwind 나 Chakra UI 가 이런 "UI 프레임워크"의 같은 카테고리에 있다고 고려하지 않습니다.

Tailwind 는 바로 사용할 수 있는 컴포넌트를 제공하지 않고, 디자인 토큰을 제공합니다. Max Stoiber 가 말했듯이, Tailwind 는 개발자에게 가드레일 세트를 제공합니다. 이를 효율적으로 사용하려면 여전히 디자인 감각이 필요하지만, 처음부터 뭔가를 디자인하는 것보다는 어렵지 않습니다.

Chakra UI 는 바로 사용할 수 있는 컴포넌트를 제공하지만, 정말 최소한의, 로우 레벨 컴포넌트들입니다. 이것들은 플랫폼 기본값들의 더 나은 버전으로 보일 뿐입니다.

제 좋은 친구인 Emi 는 Chakra UI 가 체크박스와 라디오 버튼과 같은 것들의 센스있는 기본값을 제공해주기 때문에 Chakra UI 를 좋아한다고 말했습니다. 그녀는 커스터마이징의 함정을 피할 만큼 디자인에 충분히 능숙하지만, 처음부터 전체 디자인 시스템을 만드는 것이 편할 만큼 자신은 없습니다. 이 도구는 그녀와 같은 상황에 처한 사람을 위한 완벽한 중간 지점입니다.

이러한 솔류션들은 디자인을 해결해준다고 주장하지 않는다는 것이 차이점이라고 생각합니다. 올바른 방향성을 잡아주는 데에는 도움이 되지만, 모든 것이 커스터마이징 가능하고 특정 디자인 미학에 얽메이지 않게 해줍니다.

제가 추천하는 대안책

당신이 전문가 수준의 사이트와 Application 을 만들고 싶지만, 디자인 배경이 없는 개인 개발자라면, 어떻게 해야할 까요.

몇가지 추천하는 방법이 있습니다.

디자인 감각을 기른다

안 좋은 소식이 있습니다. 몇가지 다지안 기본을 배우는데 시간을 조금 써야한다고 생각합니다.

이건 조금 먼 길을 가는 것들 중 하나입니다. 예술 학교에 가거나 새로운 기술을 배우기 위해 몇년을 쓸 필요가 없습니다. 디자인은 어렵지만, 세계적인 디자이너가 되려는게 아닙니다. 우리의 목표는 훨씬 더 겸손하죠. 그리고 얼마나 빨리 달성할 수 있는지, 또는 이미 얼마나 진행해왔는지 알면 놀랄 것입니다.

디자인에 관심이 없다고 하더라도, 프론트엔드 개발자로서 디자인 감각을 기르는 건 중요한 기술이라고 생각합니다. 믿거나 말거나, 저희는 프로젝트에 디자인에 관한 결정들을 계속해서 해가고 있습니다. 가장 상세하고, 충실한 목업조차도 여전히 중요한 내용들이 빠져있습니다.

예를 들어 :

• 운이 좋다면, 3가지 화면 크기가 제공될 수 있지만, 이 크기 사이에서 UI 가 어떻게 작동해야 하는지 결정하는 것은 저희 몫입니다.

• 데이터는 목업에 보이는 것 처럼 깔끔한 경우가 거의 없고, 이름이 길거나, 누락된 데이터 등을 처리하는 방법을 결정해야 합니다.

• 로딩 중, 빈 화면, 또는 에러 상태 표시는 목업에서 빠져 있는 경우가 많습니다.

개발자로서 제 필살기 중 하나는 디자인이 정확하게 주어지지 않는 상황에서 무엇을 해야하는지 알아낼 수 있을 만큼 충분한 디자인 감각이 있다는 점입니다. 디자이너가 제 질문에 대답하기를 기다리는 동안, 제 직관에 의존할 수 있습니다. 항상 올바르게 잡는 건 아니지만, 대부분 잘 해냅니다. (그렇지 않을 때는 디자인 직관을 향상할 수 있는 또 다른 기회가 되겠죠!)

디자인 감각을 기르려면 어떻게 하나요?

제품/디자인 팀과 함꼐 일한다면, 접근 가능한 리소스들이 정말 많이 있습니다. 그들이 만든 디자인들에 대해 중요하게 생각해보세요. 질문도 많이 하시고요 - 대부분의 디자이너들은 어떻게 이것들이 만들어졌는지, 왜 이러한 선택을 했는지에 대해서 이해할 수 있게 흔쾌히 도와주실 겁니다. 기술적인 도전이라고 생각하세요. 좋은 디자인으로 향하는 시스템과 과정들을 배울 수 있습니다.

저는 예전에 "제품, 디자인과의 효율적인 협업" 라는 이름의 블로그 글을 썼습니다. 이러한 생각을 좀더 깊게 다루고 있습니다.

디자이너들과 일하지 않는다면, (또는 디자이너 친구가 없다면) 매일 사용하는 것들을 리버스 엔지니어링해볼 수 있습니다. 사물의 간격과 사용된 글꼴 크기를 기록해 두세요. 비판적인 시각으로 패턴들을 보기 시작할 것입니다.

훔치기

그래요. 예리한 디자인 감각이 있다고 해도, 처음부터 디자인을 만들어 가는 것은 여전히 어렵습니다. 그러니 그렇게는 하지 말아요.

대신에, 저희가 만들려고 하는 것과 유사한 전문적인 디자인을 찾아보도록 합시다. dribble, behance 와 같은 디자이너 커뮤니티나 awwwards 같은 아카이브를 찾아볼 수 잇습니다.

예를 들어, 개를 위한 우버 스타트업을 구축 중이고, 운전자 대시보드를 디자인하려 한다고 가정해봅시다. "대시보드" 에 대한 Dribble 검색은 많은 흥미로운 디자인들을 보여줍니다.

Dribble 은 "디자인"을 왜곡하는 경향이 있으므로 실제 제품을 사용하여 영감을 얻는 것을 원할 수도 있습니다. 그것도 물론 좋습니다!

비결은 여러 소스들을 사용하는 것입니다. 디자인을 100% 훔치면 그건 표절이고 나쁜 형식입니다. 사람들이 눈치 채고 문제를 일으킬 것입니다.

대신에, 뭔가 유일한걸 만들기 위해서 3,4 가지 디자인을 함께 합칠 수 있습니다. 예를 들어서, 어떤 사이트에서는 색깔 구성을, 다른 사이트에서는 일반적인 레이아웃과 간격을, 세번째에서는 타이포그래피 스타일을 가져오는 방식이죠.

제가 이 전략을 실제 디자이너들에거 이야기했더니, 그들은 웃으면서 그들이 하는게 그게 전부라고 하더군요. 개발자들이 시간 대부분을 구글링하는데 쓴다고 하는 "농담" 의 디자이너 버전이라고 생각합니다.

이 전략은 Life hack 처럼 느껴집니다. 수월하지는 않고 약간의 디자인 작업이 필요합니다. 당신이 영감을 얻기 위해 사용하는 디자인은 만들려고 하는 것과 100% 일치하지 않고, 그 부족한 부분을 채우기 위해 직관을 사용할 필요가 있습니다. 하지만 제가 지금까지 찾았던 방법 중에서는 디자인 배경없이 전문가처럼 보이는 디자인을 만들어내는 가장 빠른 방법입니다.

결론

개발자로서 UI 프레임워크가 디자인에 대해 알아야 한다는 부븐을 완벽하게 해결해 줄 것이라고 믿고 싶을 수 있습니다. 안타깝게도, 일반적으로 그렇게 되지 않습니다. 적어도 제가 봤었던 경험에서는요.

좋은 소식이 있습니다. 디자이너 없이도 전문가처럼 보이는 제품을 만들 수 있습니다! 몇가지 고퀄러티의 레퍼런스 디자인과 약간의 디자인 감각으로, 제품이 괜찮게 느껴지는 "충분한" 임계값에 도달한 것을 만들 수 있습니다.

저희가 많이 이야기하지 않은 또다른 점이 있습니다 : CSS

많은 프론트엔드 개발자들이 CSS 와 씨름합니다. 저도 그렇습니다! CSS 는 믿기 힘들 정도로 복잡한 언어이고, 수년간의 경험이 있어도 일관성이 없고 짜증난다고 느낄수 있습니다.

이건 제가 매우 열적으로 느끼는 문제입니다. 저는 작년 내내 개발자가 언어에 대한 자신감을 높이기 위해 CSS 과정을 만드는데에 집중했습니다.

Javascript 개발자를 위한 CSS 라고 합니다. React 나 Angular 같은 JS 프레임워크를 사용하는 친구들을 위해 특별히 제작되었습니다. 이 과정은 CSS 작동 방식을 직관적으로 이해할 수 있게 강력한 정신적인 모델을 제공하는데에 포커스를 맞췄습니다.

CSS 가 예측 불가능이라고 느껴지신다면, 한번 확인해보시길 바랍니다. 9000명 이상의 개발자들이 이 과정을 밟았으며, 반응은 압도적으로 긍정적이었습니다.