웹사이트, 모바일 앱 디자인 무료 툴 5가지 | 사이드 프로젝트 꿀템(Color Space, CSS Gradient, Shape Divider, Haikei, Cool Backgrounds)

2021년 10월 22일

시작하기 전에

워드프레스의 블록 편집기에는 기본적으로 아래의 디자인 기능들중 svg file과 비슷한 기능을 갖고 있으며 shape divider기능도 제공하므로 이것을 이용하셔도 됩니다.

이하의 내용중 주황색은 오타를 바로잡은 자막입니다. 이해를 돕기 위해 자막을 그대로 넣었습니다.

5가지 요소들을 복합적으로 적용할때 디자인 완성도가 더 올라가므로 5가지 요소들을 적당히 혼합하여 사용하세요.
❶ 컬러 팔레트 – Color Space ( https://mycolor.space/ 00:21 ~)
❸ 꼬불 꼬불 선나누기 – Shape Divider( https://www.shapedivider.app/ 03:59 )
❹ 다양한 SVG -Haikei( https://haikei.app/ 06:24 )

참고 : 워드프레스를 사이트 빌더로 이용하는 경우, 활용하기 어렵습니다.

❷의 경우, css를 넣을 줄 알아야 합니다. ❸ 과 ❹ 를 사용하기 위해서는 SVG file을 업로드할 수 있어야 하고 워드프레스에서는 SVG file upload가 막혀있습니다. 이것은 아래의 플러그인으로 해결할 수 있으나 이미지에 맞춤 CSS를 넣어주기 위해서는 엘리멘터 유료 버전을 사용해야만 가능합니다.

SVG Support

❹ 다양한 SVG -Haikei( https://haikei.app/ 06:24 )는, 워드프레스로를 사용하더라도 이놈은 SVG파일도 지원하지만 PNG파일도 지원하므로 PNG파일배경으로 쓰면 괜찮을 것 같습니다.

소개(0:00~)

간지나는 웹디자인 개발자이더라도 포트폴리오나 사이트 프로젝트를 만들때 때때로 우리는 디자이너가 되어야합니다. 어떤 색상을 쓰고 어떤 그래픽 요소를 생활 건지 몇 시간동안 찾아도 답이 안 나온 적 있으신가요 그런 여러분들을 위해 준비했습니다

여러분들의 디자인 감상을 뿜어 올려줄 무료 온라인 틀 5가지를 소개해 드리도록 할게요.

❶ 컬러 팔레트 – Color Space ( https://mycolor.space/ 00:21 ~)

첫번째 유용한 툴은 컬러스페이스입니다. 웹사이트를 만들 때 정말 이쁜 컬러 팔레트를 쉽게 만들수 있는 툴인데요. 웹페이지를 만들때, 그래 이 웹 사이트의 주된 컬러는 핑크 색이야 라고 결정했다면 그외에 나머지 것들, 텍스트 색상이나 강조하거나 다른 배경 색상은 무엇으로 할 건지 어떤 색상을 함께 써야 이쁜 색상이 될 건지 고민을 많이 하신 적이 있으신가요?

물론 이런 컬러 윌(?) 같은 온라인 툴을 사용하면 여러 가지의 색상을 확인이 가능하지만 일일이 이렇게 하나씩 확인하면서 정말 마음에 드는 팔레트 컬러를 찾는 것은 쉬운 일은 아니에요. 색상에 대한 이론적인 것을 잘 알고 계시지 않는다면 사용하기가 어려울 수도 있어요.

바로 컬러 스페이스는 이렇게 하나씩 일일이 조정하면서 이쁜 컬러 팔레트를 찾는 수고로움을 간편하게 만들어주는 툴인데요. 내 웹 사이트의 사용 하고자 는 주요 컬러 딱 하나만 정해놓으면 빠밤~! 이렇게 그에 맞는 다양한 팔레트 들을 보여줍니다.
우리가 방금 입력한 주요 색상과 어떤 색깔들을 함께 써야 지 좋은 팔레트가 될 수 있을지 여러가지 조합들을 보여주는데요. 보통은 첫 번째와 두 번째 팔레트 중 하나만 잘 선택해서 사용하셔도 색상 센스가 뛰어난 컬러 감각이 돋보이는 웹사이트를 만들 수 있어요. 저는 첫번째 팔레트를 이용해서 웹 사이트의 색상을 업데이트 해보도록 할꺼예요. 이렇게 주요 컬러와 엑센트 컬러들을 모두 다 복사하셔서 CSS파일에 정의를 해줍니다

CSS를 어떻게 사용하면 좋은지 html은 어떻게 사용하면좋은지는 드림코딩 유튜브 채널에 있는 영상들을 참고해 보시구요. 조금 더 심도있게 저와 함께 공부해 보고 싶다면 드림 코딩 아카데미 있는 포트폴리오 클룸(?) 코딩 강의를 확인해보세요. 이렇게 포인트 색상만 업데이트해주어도 사이트가 훨씬 더 세련되 보이지 않나요. 이처럼 색상 컬러 팔레트를 쉽게 만들어 보고 싶다면 컬러 스페이스를 확인해 보세요.

팔레트는 유화를 그리는 것을 상상하면 이 툴이 어떤 기능을 하는지 쉽게 이해할 수 있습니다.

팔레트 색상을 입력할때 RGB 방식 색상 코드 표기법인 헥스 코드로#+6자리 형태로 넣어주어야 합니다.

^{헥스 코드}

^{RGB 방식 색상 코드 표기법이다. #과 뒤에 붙는 여섯 자리[1] 또는 세 자리[2]의 숫자로 색상을 표기하는 방식이다. 여섯 자리인 경우는 두 자리씩 끊어서 각각 Red, Green, Blue의 강도를 256(=162)단계에 걸쳐 나타낸 것이며, 각 두 자리수는 16진수이므로 00(=010)일 때 가장 어둡고 FF(=25510)일 때 가장 밝다. 중간값은 80(=12810)이다. 세자리인 경우는 한자리씩 끊어서 역시 ‘Red’, ‘Green’, ‘Blue’ 이며 각 색상의 강도를 16단계씩 나타낸다.[3]}

^{여덟 자리 또는 네 자리로도 나타낼 수 있는데, 이 경우 각각 뒤에 추가되는 두 자리 또는 한 자리는 알파값 즉 투명도를 의미한다. 00 또는 0일 때 완전히 투명해지고, FF 또는 F일때 불투명해진다.}

파란색 헥스코드를 알고 싶다면 구글에서 “파란색 hex”처럼 입력하면 쉽게 헥스코드를 얻을 수 있습니다.

팔레트가 만들어지는 원리를 알고자하면 너무 어렵습니다.(저도 알아보았는데 비전공자인 저에게는 이해가 너무 어려웠습니다.) 동영상에서 설명하는 것처럼 따지지 마사고 Generic Gradient, Matching Gradient 에 표기된 색상을 이용하시는 것이 속편한 이용법입니다.

❷ 그레디언트 – CSS Gradient ( https://cssgradient.io/ 02:09 ~)

다음으로는 css 그레이디언트입니다.
이쁘고 아름다운 그레이디언트 컬러를 만들 수 있도록 도와주는데요. 시각적으로 확인하면서 내가 원하는 글에 대한 틀을 만들 수 있기 때문에 아주 유용하게 쓰이고 있습니다.
모던한 웹 디자인에서 그레이디언트는 빼놓을 수 없는데요. css로 단 몇줄만 정의하면 사용할 수 있기 때문에 이미지보다 가벼우면서 더 편리하게 디자인에서 사용할 수 있기 때문이에요. 많은 웹사이트에서 그레이디언트를 사용하고 있는데요 헤더나 배너에서 그레디언트를 사용하고 있고, 여기 GUCCI(구치) 웹사이트에서는 전체적인 배경화면을 그레이디언트를 사용하는 걸 확인할 수 있어요. 그리고 가장 흔하게 사용하는 곳이 버턴인데요.
버튼을 그레이디언트 색상을 입혀 주면서 조금 더 사용자 눈에 뛸 수 있도록 돋보이게 만들 수 있습니다. 자 이런 그레이디언트는 이 온라인 툴을 사용하면 손쉽게 만들어 볼 수 있는데요. 각각 포인트 별로 원하는 색상을 지정할 수 있고 원한다면 위치별로 원하는 컬러를 더 추가해 줄 수도 있습니다. 그리고 이런 위치 들은 자유자재로 변경의 가능하기 때문에 조금 더 자유롭게 내가 원하는걸 만들 수 있구요 각도 조절도 가능합니다.
이렇게 각도와 위치만 변경해도 독특한 그레이디언트를 만들어 볼 수 있을꺼예요 그레이디언트를 사용하면 조금 더 동그란 모양의 그레이디언트도 만들어 볼 수 있어요. 여러분들 선호도에 따라서 만들어 볼 수 있고 아니면 이렇게 미리 지정된 프리셋을 이용해서 다양한 그레이디언트를 만들어 볼 수 있습니다.

이렇게 만들어진 그레이디언트는 여기 아래에 있는 [Copy to Clipboard]를 이용하면 CSS를 그대로 복사해서 내 웹사이트에 적용해 볼 수도 있어요 이 투에서 시각적으로 변하는 그랜트를 보다가 마음에 들면 CSS를 그대로 복사해서 아까 이전에 만든 웹 사이트의 실세 만추가 저도 그 이렇게 훨씬 더 개선된 웹사이트를 만들어 볼 수 있어요.

밋밋한 단 세계 웹 페이지 보다는 css 그레이디언트를 이용해서 조금 더 흥미로운 웹사이트를 만들어보시길 강력하게 추천해드립니다.

각도와 위치를 변경하거나 동그란 모양의 그레이디언트를 만들면 독특하고 이쁜 디자인이 나옵니다.

워드프레스에서 CSS 추가하기

워드프레스 정보꾸러미의 워드프레스에서 CSS 추가하기

외모 (워드프레스 버전에 따라 “테마 디자인”) > 사용자 정의하기 > 추가 CSS (Additional CSS)를 클릭하여 사용자 CSS를 추가할 수 있습니다.

❸ 꼬불 꼬불 선나누기 – Shape Divider( https://www.shapedivider.app/ 03:59 )

다음 세 번째 아이템은 요 여러분들이 제일 좋아하실 거 같은데 이렇게 수평적으로 일직선이 아니라 살짝 비스듬하게 그려진 이미지 보신적 있으신가요. 여기 웹사이트도 섹션이 들이 수평적으로 나눠진 것이 아니라 비스듬하게 그려져 있는걸 볼 수 있죠. 여기 이 사이트는 어떤가요. 조금 더 흥미로운 모양으로 섹션 들이 나눠져 있는 걸 확인해 볼 수 있습니다.
요즘에 핫하게 떠오르는 트렌드로 많은 웹사이트에서 밋밋한 수평 디바이더보다는 이렇게 컬비하고 웨이브한 곡선으로 이루어진 디바이더를 사용하고 있어요. 정말 많은 예제들 보여줄 수 있지만 예제 소개는 여기까지 하도록 하고 어떻게 이런모양을 만들 수 있는지 알려 주도록 할게요 바로 SVG 를 이용해 볼수있는데요. SVG란 스케일러블 벡터 그래픽스 의 약자인데요. 사이즈가 고정 낸 이미지파일 과는 다르게 SVG 파일 안에는 경로와 색상에 대한 정보를 담고 있어서 원하는 사이즈 별로 늘이거나 줄여도 전혀 깨짐 없이 확인해 가능한 이미지 파일이에요. 이런 이쁜 SVG 를 만들 수 있는 세이프 디바이더 사이트를 소개하도록 하겠습니다.

벌써 막 사이트가 이뻐질 것 같고 왠지 괜찮은 디자인 하나를 만들 수 있을 것 같으니 설레이는 마음 바~운스 바~운스 죄송합니다. 여러분들께 공유해드릴 생각에 너무 신이 났네요. 이 사이트를 이용하시면 다양한 쉐입(shape)들을 선택하면 후 이렇게 다양한 모양들을 확인해 볼 수 있어요. 가장 흔하게 사용되어지는 쉐입(shape)를 다 확인해 볼 수 있고요. 하나씩 선택하면서 내가 원하는 모양을 찾을 수 있어요. 이렇게 원하는 모양을 선택하면 지정된 모양 뿐아니라 여기 하이트(Height) 와 위쓰(Width)라는 정보가 있죠. 그래서 높이도 조절이 가능하구요.

너비도 내가 원하는 만큼 쭉 늘리거나 조금 더 세밀하게 모아 줄수도 있어요. 그리고 플립(Flip)과 인버터(Invert)을 이용해서 모양을 바꿀 수도 있고 위쪽 배너에 다가 사용할 건지 밑에 다가 사용할건 지에 따라서 탑과 바-덤(Top/bottom)을 선택할 수 있어요. 원하는 모양을 시각적으로 확인하면서 조정한 다음에 색상도 내가 원하는 것을 설정할 수 있어요.

자 이렇게 다 하시면 여기 다운로드 아이콘 보이시죠. 이 버튼을 누르면 복사가 가능한 html 코드와 CSS가 있어요. 이거 복사에서 프로젝트의 붙여 넣기만 하면 간편하게 적용해 볼 수 있습니다.

조금 전의 그레디언트를 적용한 이 웹사이트에 SVG 를 적용하면 야~~ 훨씬 더 흥미롭고 아름다운 디자인으로 변경 된 걸 확인해 볼 수 있습니다.

세프 디바이더로 조금 더 재미있는 웹사이트 웹 어플리케이션을 만들어 보면 어떨까요.

^{스케일러블 벡터 그래픽스(Scalable Vector Graphics)}

^{스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다.}

^{SVG 형식의 파일은 어도비 일러스트레이터와 같은 벡터 드로잉 프로그램을 사용하여 편집이 가능하다. 물론 XML 형식으로 되어 있으므로 메모장과 같은 문서 편집기로도 편집이 가능하다.}

^{현재 마이크로소프트의 인터넷 익스플로러 8 및 이전 버전을 제외한 대부분의 주요 웹 브라우저들은 SVG를 지원한다. 인터넷 익스플로러 8 및 이전 버전에서는 SVG 파일을 보기 위해 별도의 플러그인을 수동으로 설치하여야 하며, 그렇지 않은 경우에는 웹 페이지 제작자가 구글 코드에서 개발중인 자바스크립트 라이브러리, SVG Web 을 웹 페이지 코드에 포함시켜야 한다.}

❹ 다양한 SVG -Haikei( https://haikei.app/ 06:24 )

다음으로 이어지는 네 번째 여러분들의 웹사이트를 다음 레벨로 가져갈 수 있는 정말 아름다운 SVG 를 만들수 있는 하이케이를 소개합니다.
이 하이케이로는 조금 추상적인 업스트렉트한 모양을 만들 수 있는데요. 원하는 색상도 지정할 수 있고 다양한 모양 들의 SVG 를 만들 수 있습니다 SVG 사이즈는 이미지파일 보다 훨씬 더 작기 때문에 한 페이지 안에서 여러 개의 이미지를 사용하면 이 웹사이트를 로딩하는 시간에도 지장을 줄 수 있지만 SVG는 훨씬 가볍기 때문에 여러 개의 SVG를 사용해도 크게 부담없이 사용할 수 있어요. 이런 두리뭉실한 모양들이 어떻게 사용되어지는 지 궁금하시죠. 데모를 보여드리도록 하겠습니다. 여기 웹사이트를 보시면 많은 곳에서 SVG를 사용하고 있는데요. 여기 비디오 요소 뒤에 배경 화면을 보시면 SVG가 들어 있는걸 볼 수 있고요.

여기에서도 배경 화면에 SVG 모양들이 여러 개가 들어 있는걸 확인할 수가 있죠. 이처럼 주요 요소가 아니더라도 백그라운드에서 이 다른 요소들을 조금 더 돋보이게 하기 위해서 사용되어질 수도 있고요. 또는 여기에서 처럼 아예 SVG 모양을 이용해서 버튼으로 사용하는 경우도 있어요. 특이하면서 재밌어 보이지않나요 다른 웹사이트에서 도 이렇게 서비스를 위해서 조금 더 독특하게 디자인에서 만드는 거 볼 수 있고요.

여기 웹사이트를 보셔도 정말 재밌게 SVG를 이용해서 웹 사이트 전체를 이쁘게 만들어 준 걸 볼 수 있습니다. 자 이제 본격적으로 SVG 모양을 만들기 위해서 다시 어플리케이션으로 돌아왔어요

왼쪽에서는 여러분들이 만들고 싶은 모양을 선택할 수 있고 다른 모양을 만들고 싶다면 중간에 주사기 모양을 이용해서 랜덤하게 다른 모양으로 변경이 가능합니다. 이렇게 만들어진 모양은 SVG 또는 png 이미지로도 출력이 가능한데요. 그럴 경우에 너비와 높이도 지정할 수 있고 수평과 수직적으로 비율을 어떻게 설정할 건지도 설정할 수 있어dy. 그리고 위 아래의 왼쪽 오른쪽 방향을 설정할 수 있고요 이렇게 색상도 우리가 원하는 대로 설정할 수 있고 그레이디언트도 지정해 줄 수 있습니다.

자 한번 우리 프로젝트의 정리해볼까요. 이렇게 백그라운드 색상은 투명색으로 변경하고 메인 주요 색상도 변경한 다음에 포지션을 이용해서 내가 원하는 위치에 지정해 줄 수 있어요 그리고 모양의 관련된 여러 속성 값들을 이용해서 조금 더 특이한 모양을 만들거나 주사기 모양을 이용해서 다양한 버전의 모양을 확인해보세요.

마음에 든다면 이것을 SVG로 출력을 해서 다운로드 받은 SVG를 웹사이트에 추가해서 적용만 해주면 됩니다.

이렇게 밋밋한 웹사이트가 짜~잔! 추상적인 SVG을 통해서 조금 더 독특하고 재미있는 웹사이트로 변신했죠.

워드프레스를 사용하시는 분들은 이 툴은 SVG파일도 지원하지만 PNG파일도 지원하므로 PNG파일을 배경으로 활용하세요.

왼쪽에 디자인 자산을 선택하고 우측끝에 옵션을 활용하여 디자인을 만듭니다.

우측끝에 옵션들에는 아래의 것들이 있습니다. 자주 활용하여 쉬워질때까지 옵션들을 익혀서 이용하세요.

CANVAS(화폭)
VARIANTS(변종, 이형(異形))
– Style : Solid, Outline
– Interpolation Wave. Peank Step
DIRECTION
COLOR
SHAPE
– Shape에는 Contrast(대조, 대비), Complexity(복잡성, 복잡함), Size(크기), Gap(크기), Overlap((두 사물의) 겹침[포개짐]), Wave count(물결의 수), Balance(균형[평형] (상태)) 이 있습니다.

백그라운드 색상을 투명색으로 전환하면 벡터이미지가 나와서 활용도가 더 높습니다.

엘리멘터를 이용하여 png 파일을 배경 또는 배경이미지로 이용할 수 있습니다.^{(참고 : svg support 플러그인을 설치한 경우, 워드프레스 고전편집기나 블록편집기에서 미디어 업로드는 가능하나 엘리멘터에서는 업로드한 동영상을 이용할 수 없습니다. 엘리멘터에서는 svg file은 이용할 수 없습니다.)}

레이아웃에서 [스타일] -> [배경] 또는 [배경이미지]로 들어가 배경 또는 배경이미지로 넣을 수도 있고

[제목, 텍스트 에디터]등에서 [고급] -> [배경]로 이동하여 배경이미지로 넣을 수 있습니다.

다양한 SVG를 Haikei와 엘리멘터를 이용하여 워드프레스 편집기에 넣기-2

❺ 이쁜 배경 이미지 – Cool Backgrounds( https://coolbackgrounds.io/ 08:58 )

백그라운드로 이미지 얘기하면 쿨 백그라운드 사이트를 빼놓을 수 없죠. 여기 사이트에서는 조금 독특한 백그라운드 이미지를 손쉽게 만들 수 있는데요. 아카데미에서 진행한 탈 스크립트의 실전프로젝트에서도 이 백그라운드를 위해서 재미있는 모션 프로젝트를 만들어 보았어요. 여기 웹 사이트에서는 다양한 모양의 백그라운드 패턴 색상을 선택할 수 있습니다.

이렇게 원하는 패턴을 선택했다면 색상 팔레트를 이용해서 원하는 색상으로도 변경이 가능해요. 각각 모양마다 제공되어지는 팔레트를 이용해도 좋구요. 아니면 상위에 있는 메인 색상을 지정하면 이렇게 검정색 위주로 패턴들을 확인하고 색상들이 지정해 줄 수 있어요. 마음에 든다면 다운로드 아이콘을 이용해서 해당 이미지를 다운로드받아 볼 수 있습니다.

보너스 – Dribble 활용법( https://dribbble.com/ 09:42 )

뭐 앨리 소개해주신 디자인 틀은 정말 좋아 보이는데요. 저는 디자인 센스가 너무 없어서 아예 어떻게 디자인을 접근해야 될지 모르겠어요 라고 하시는 분들을 위해서 정말 유용한 사이트 드리블 추천해드립니다. 이 사이트는 제가 예전에도 알려 드린적이 있는데요.
조금 다르게 활용하는 팁에 대해서 또 알려드리도록 할게요 이 드리블에서는요 다양한 웹사이트나 모바일 어플리케이션의 디자인을 확인해 볼 수 있는데요 아 이렇게 디자인 하면 되겠다. 요런 색상의 쓰면 돼 있다. 여기 주요 색상을 이용해서 웹 사이트를 만들면 되겠다 라는 좋은 아이디어를 얻을 수 있는 곳이에요. 자 지금부터는 이 드리블을 어떻게 활용할 수 있는지 꿀팁을 알려드릴께요.

웹 디자인 탭의 오셔서 파퓰러 유행하는 탭을 클릭해 보세요. 그러면 현재 뜨고 있는 디자인들을 확인해 보실 수 있습니다. 여기까지는 제가 지난번 알려졌는데요. 아래 Goods for Sale를 클릭하면 이런 디자인 요소들을 판매하는 것을 확인해 볼 수 있어요. 그래서 정말 센스가 없다면 여기서 구입하셔도 되구요 또 무료로 제공되어지는 디자인 요소 들도 꽤 많이 있습니다.

어떻게 확인해 볼 수 있냐면요 필터 탭에 오셔서 프라이스를 제로 로 만든 다음에 검색해보시면 무료로 제공되어 지는 그래픽 요소들을 확인해 볼 수 있어요. 이렇게 드리블에서는 디자인적인 요소도 확인할 수 있고 감각을 키울 수 있고 또 무료로 제공해 주는 것들도 확인해 볼 수 있습니다.