생산성을 빠르게 높여주는, 프런트엔드 개발 툴 10가지

10년 전까지만 하더라도 '프런트엔드 웹 개발'이라는 말은 아주 익숙한 용어는 아니었습니다. 하지만 대부분의 웹 개발자들이 웹사이트는 물론이고, 백엔드 웹 애플리케이션까지 개발해야 했던 시절은 이미 오래전에 지나갔습니다. 프런트엔드 개발은 현재 개발자로서 일할 수 있는 가장 멋진 직종 중의 하나입니다. 프런트엔드에 앵귤러(Angular), 리액트(React), 뷰(Vue)와 같은 최신 프레임워크가 도입되었고, 브라우저에서는 불가능하다고 생각되었던 수많은 기능을 지원하는 최신 브라우저가 등장했으며, 웹지엘(WebGl)과 같은 그래픽 엔진까지 나타나면서 개발자들은 이제 프런트엔드 개발에 좀 더 집중할 수 있게 되었습니다.

그렇다고는 해도, 단번에 사람들의 눈길을 사로잡는 뛰어난 디자인과 직관적인 사용자 인터페이스를 구현하는 것이 쉬운 작업은 아닙니다. 디자인에서의 트렌드를 따라잡고, UI/UX 원칙들을 지키며, 동시에 성능까지 유지한다는 것은 여전히 어려운 일입니다. 그래서 이번 시간에는 프런트엔드 개발의 다양한 문제들을 해결할 수 있고, 생산성을 높여줄 수 있는 온라인 도구 10가지를 소개하고자 합니다.

​
​

1. CSS 그리드 제너레이터 (CSS Grid-Generator)

CSS 그리드(grid)는 CSS와 HTML만을 사용해서 레이아웃을 구성할 수 있는 그리드 기반의 시스템입니다. 무료 소프트웨어 도구인 부트스트랩(bootsrap)이나 레이아웃 제작 도구인 플렉스 박스(flexbox)와는 다르게, 이 그리드 시스템은 코드를 많이 사용하지 않고도 2차원의 사용자 지정 레이아웃을 만들어낼 수 있습니다.

CSS 그리드 제너레이터를 이용하면 행이나 열, 간격과 같은 사용자 정의 옵션을 사용해서 그리드를 디자인하고, 버튼을 클랙해서 해당 그리드의 코드를 내보낼 수 있습니다.

​

2. 박스 쉐도우 (Box- Shadows)

웹사이트에서 다중 레이어로 멋진 쉐도우 효과를 만들고 싶은데, 그 코드를 찾는 게 어렵다면 여러분을 도와줄 수 있는 멋진 웹사이트를 사용해보세요.(brumm.af/shadows)

쉐도우 레이어, 알파, 블러, 스프레드 등의 속성에 대한 기본 설정을 지정하면, 쉐도우 효과에 대한 CSS 코드가 즉시 생성되며, 이 코드를 복사해서 여러분이 가지고 있는 어떤 모양에도 붙여넣기 할 수 있습니다.

​

3. 그래비언트 (Grabient)

자신의 디자인에 쿨한 그라데이션이 있다면 누가 좋아하지 않을까요! 물론 모두가 좋아하진 않을 수도 있고, 그라데이션을 좋아하는 사람도 있고, 그렇지 않은 사람들도 있겠지만, 디자인과 잘 어울리도록 그라데이션을 맞추려면 CSS를 사용하면서 시행착오를 겪어야만 합니다.

그래비언트(Grabient)가 이런 일을 도와줄 수 있습니다. 색상을 선택하고 각도만 조절하면, 원하는 그라데이션에 맞는 코드를 쉽게 얻으실 수 있습니다.

​
​

4. 마이브라우저 (Mybrowser.fyi)

웹사이트를 아무리 잘 코딩한다고 하더라도 브라우저 호환성이나 반응성 등과 관련해서 여러 가지 문제가 발생할 수 있습니다. 이런 경우, 문제를 해결하기 위해서는 브라우저와 시스템의 정확한 사양을 파악하는 것이 중요합니다.

마이브라우저(Mybrowser.fyi)를 써보세요. 여러분은 문제가 발견된 브라우저와 동일한 조건에서 이 도구를 열기만 하면 됩니다. 마이브라우저에서는 필요한 모든 세부 정보가 포함된 보고서를 만들어 주고, 그 보고서를 공유할 수 있는 링크도 생성해줍니다.

​
​

5. 이징스 (Easings)

CSS에서 전환 효과 적업을 했다면, 전환효과의 속도를 다양하게 하기 위해서 트랜지션 타이밍 펑션(transition-timing-function) 속성을 설정하고 큐빅베지어(cubic -bezier) 함수를 사용했을 가능성이 높습니다. 하지만 큐빅베지어 함수의 변수를 이용해서 정확한 속도를 설정하는 것은 조금 까다로운 작업입니다. 이징스(Easings)를 이용하면 이런 작업을 쉽게 할 수 있습니다.

이즈인사인(easeInSine)이나 이즈아웃사인(easeOutSine) 등과 같은 컬렉션에서 원하는 효과만 고르시면, 그 효과를 내기 위해서 큐빅베지어 함수에 전달해야 하는 정확한 값들을 얻을 수 있습니다.
​

​

6. 아이헤이트리젝스(iHateRegex)

사용자 정보에는 보통 이런 조건들이 있습니다. 사용자 이름은 알파벳으로 시작해야 하고 '@'을 제외한 특수문자는 사용할 수 없으며, 패스워드는 적어도 대문자와 특수문자를 하나씩은 사용해야 한다는 것들 말이죠. 정규식(regex) 표현에 대한 유효성 검사는 사용자 조건을 검증하기 위해서 프런트엔드에서 가장 많이 사용하는 기법 중의 하나입니다.

하지만 이러한 조건에 맞는 정확한 정규식을 쓴다는 것이 즐거운 작업은 아닙니다. 특히 정규식 표현에 익숙하지 않은 사람들이라면 말이죠. 아이헤이트리젝스(iHateRegex)는 정규식 표현을 찾기 위해 사용하는 도구이며, 입력한 값을 시각적으로 표현해서 확실하게 검증할 수 있게 해줍니다.

​
​

7. 브라우저핵스 (browserhacks)

브라우저 헥스는 인터넷 전반에 걸쳐서 브라우저별로 사용할 수 있는 다양한 CSS와 자바스크립트 핵(hack)을 목록으로 보여주는 간단한 도구입니다. 핵이 언제나 모든 문제를 해결하기 위한 완벽한 솔루션은 아닙니다. 그렇지만, 브라우저핵스는 해결책을 찾기 어려운 이상한 문제들에 대한 해법을 찾아내는 데 사용할 수 있는 유용한 도구입니다. 이 사이트에서는 각 브라우저의 여러 버전들뿐만 아니라 거의 모든 브라우저에서 사용할 수 있는 아주 많은 핵들을 찾아보실 수 있습니다.

​
​

8. 애니미스타 (animista)

애니메이션에 관해서 살펴보자면, 다양한 효과를 가진 CSS애니메이션 코드를 생성하고 조절하는 데 있어서는, 애니미스타가 최고의 웹사이트 중 하나라고 할 수 있습니다. 들어가기, 나가기, 텍스트 등 다양한 활용 사례들 중에서 마음에 드는 걸 고른 후에, 다양한 효과로 맞춤 설정할 수 있습니다. 애니미스타를 둘러보면서 다양한 옵션을 편리하게 사용해보세요.

​
​

9. 쿨러스 (coolors)

색채 조합을 정의하는 것은 웹사이트를 디자인할 떄, 가장 먼저 처리하고 싶은 일 중의 하나입니다. 대부분의 겨우, 우리는 기본 색상으로 시작한 다음, 그 주변에서 컬러 팔레트를 만들려고 노력합니다.

작업을 시작할 수 있는 기본 색상이 있는가에 관계없이, 쿨러스(coolors)는 온라인에서 컬러 팔레트를 생성할 수 있는 쿨하면서도 직관적인 툴입니다. 쿨러스를 이용하면 키보드 자판 하나만 눌러서 컬러 팔레트를 생성한 다음, HSB, RGB, CMYK는 물론이고 고전적인 색상 선택기와 같은 다양한 방법으로 설정할 수 있습니다. 그리고 설정한 색상을 다른 위치로 드래그해서 원하는 만큼 다른 색상들을 생성할 수 있습니다. 색각이상(color blindness)에 대해서도 다양한 설정을 할 수 있습니다. 가장 좋은 점은 SCSS, SVG, PDF, URL 등 다양한 형식으로 내보낼 수 있는 기능도 있다는 것입니다.

​

​

10. 옵티미질라(Optimizilla)

프런트엔드 작업에서 가장 어려운 점 중에 하나는 모든 사용자들에게 최고의 성능을 보장하기 위해서 모든 리소스를 최대한 가볍게 유지해야 한다는 것입니다. 하지만 쉽지는 않죠. 특히나 디자이너들이 던져준 고화질의 이미지가 보기에는 매끈하고 멋져 보이지만, 페이지 로딩 시간을 고려하자면 용량이 너무 큰 경우에는 더욱 그렇습니다. 옵티미질라는 인터넷에서 사용할 수 있는 이미지 최적화 툴 중의 하나입니다. 즉, '최고의 손실 압축과 최적화 알고리즘을 사용해서 JPEG와 PNG 이미지를 필요한 화질을 유지하면서 가능한 작은 사이즈로 만들어줍니다.' 그리고 압축 수준을 조정한 다음, 웹사이트에서 바로 비교해볼 수도 있습니다.

​

제목에서는 10가지의 프런트엔드 개발 툴을 소개한다고 적어놓았지만, 지금부터는 일종의 깜짝 선물, 이스터에그(easter egg)입니다. 여러분이 아직 들어본 적이 없을 수도 있는 트렌드와 도구들을 알아보세요.

뉴모피즘(Neumophism)

스큐어모피즘(skeuomorphism)은 UI 디자인을 할 때, 현실 세계와 비슷하게 만든다는 디자인 컨셉입니다. 이런 사례들 중 가장 대표적인 것이 바로 iOS13에 있는 애플의 편집기 도구입니다. 이런 컨셉에서는 도구 모음 항목들에서 3D 효과가 좋으며, 예전의 디자인과 비교하면 훨씬 더 실제처럼 보입니다.

뉴모피즘은 이러한 UI 트렌드를 한 단계 더 끌어올리기 위한 새로운 접근 방법입니다. 이름이 새롭다는 뜻의 '뉴'와 '스큐어모피즘'을 조합한 것인데요. neumorphism.io에서는 뉴모피즘 효과를 아주 쉽게 만들 수 있으며, 블러, 모양, 세기, 조명 각도와 같은 특성으로 디자인에 대한 모양과 느낌을 조절할 수 있습니다.

​

지금까지 프런트엔드 개발에 도움이 되는 개발 툴 10가지를 알아보았습니다. 여러분의 IT개발 프로젝트에 오늘 알려드린 개발툴을 활용해서 업무시간을 빠르게 단축하시길 바랍니다. 생산성을 높이는데 확실히 도움이 될 것입니다.

> 이 글은 'Front-End Dev Tools For increased Productivity'를 각색하여 제작되었습니다.