나홀로 개발자를 위한 디자인 관련 사이트

기획자, 디자이너의 도움없이 개발자 혼자서 앱을 만든다는건 참 어려운일 같다. 아니 정확하게는 앱을 만드는건 어렵지 않은데, 이쁘게 만든게 어려운 것 같다. 

근데 이 "이쁘게"가 절대적으로 중요하다. 기능이 아무리 뛰어나다고 해도 일단 디자인이 구리면, 사용자들은 아예 설치 조차 안한다. 

나 역시 나홀로 개발자라서 디자인 관련된 작업들도 모두 혼자서 다 하고 있는데, 지금까지 몇 개의 프로그램을 만들면서 도움받았던 디자인 관련 사이트들을 정리해봤다. 나 처럼 디자이너 없이 혼자 고군분투하면서 앱을 개발하고 있을 나홀로 개발자들에게 도움이 되었으면 좋겠다.

총 21개의 사이트를 소개하려고 한다. 단순 나열하기에는 좀 많은 것 같아서 아래처럼 카테고리를 나눠봤다.

• 색 관련
• 아이콘 관련
• 이미지 관련
• 디자인 가이드
• 기타

개인적으로 나한테 도움이 많이 된 사이트는 제목 옆에 별(★) 표시를 붙여놨다. 해당 사이트에 대한 절대적인 평가가 아니고, "나한테 도움이 된 정도"만 따진거다. 사이트 자체는 훌룡한데 내 역량이 안되어서 받아들이지 못한 경우가 많을거라고 생각한다.

이미지를 클릭하면 해당 사이트로 이동한다.

색 관련

1. Design Seeds

앱의 전체적인 테마색을 고를 때 참고할만한 사이트. 개발에 적용하기 적합한지는 잘 모르겠다. 주변에 있는 사물에서 색상에 대한 영감을 얻을 수 있는(?) 그런 사이트라고 보면 될 것 같기도 하고. 솔직히 색에 관련된 부분들은 다 잘 모르겠다. 난 색에 대한 감각이 전혀 없는 것 같다. 

개인적으로는 뭔가 프로그램의 테마색상보다는 여성 쇼핑몰 같은데 더 어울리는 그런 색상들이 아닌가 싶다. 잘 모르니깐 그냥 여기까지만 써야지..-_-;;

2. Adobe 색상 구성표

위에 첨부한 이미지를 보면 바로 직관적으로 이해가 될 것 같다. 색상휠을 이용해서 색상을 고르면 어울리는 색상을 선택해준다. 어디선 봤는지 기억이 잘 안나는데,, 삼각형으로 선택해서 골라주는 색깔을 쓰면 색이 조화를 이룬다고 했던 것 같은데,, 막상 해보니 아무래도 뭔가 이상하다. 이것 역시 내가 색에 대한 감각이 떨어져서 그런 것 같다.

좀 감각이 있는 사람한테는 도움이 되지 않을까 싶다. 

3. HTML Color Names

영어로 된 "색 단어"의 색상과 헥사값을 확인할 수 있는 사이트. 흔히 "웹 컬러"라고 하는 색상들을 모아놓은 것 같다. 코딩할 때 Color.Cyan 처럼 상수로 정의된 색상이 실제로 어떤 색인지 알고 싶을 때 참조하면 좋다. 

여담으로 어렸을 때 한글의 우수성이라고 하면서 "노랗다", "샛노랗다", "누르스름하다" 뭐 이런 색 표현은 한글만 가능하다고 배웠던 것 같은데,, 영어도로 다양한 색을 표현하는 단어들이 있구나.. 라고 알게 되었음.

4. 구글 머티리얼 디자인 - 색 ★★

안드로이드 앱을 개발한다면 색상 관련해 최우선적으로 참고할만한 사이트. 일단 가이드를 먼저 잘 읽은 다음에 여기서 골라주는 색상을 사용하면 그래도 괜찮은 느낌(?)이 드는 앱을 만들 수 있다. 

5. UI Color

아이폰 앱 개발할 때 swift에서 요구하는 색상이 0~255까지의 값이 아니고, 0.0 ~ 1.0 사이의 실수 값을 요구한다. 별도의 유틸리티 함수를 작성해서 구하기도 하는데, 위 사이트를 이용하면 헥사값이나 RGB 값을 swift에서 요구하는 값으로 손쉽게 변환해준다.

아이콘 관련

6. ICO Convert ★★

이미지를 아이콘 파일(.ICO)로 변환해주는 사이트. 스마트폰 앱 개발할 때는 어차피 PNG 파일을 사용하기 때문에 필요 없고, 윈도우용 프로그램 개발할 때 유용하다. 비슷한 사이트들이 많이 있는데, 여기는 멀티사이즈 아이콘을 만들어줘서 좋다.

7. Material icons ★★★★★

구글에서 제공하는 머티리얼 디자인 아이콘 모음. 이거 없었으면 과연 제대로 된 앱을 만들 수 있었을까 싶다. 그만큼 절대적으로 큰 도움이 된 사이트. 무료로 제공해주시는 구글님께 그저 감사. 굳이 여기서 소개하지 않아도 아마 다들 알고 있을거라고 생각한다. Android Studio를 사용한다면 사이트에 들어가서 다운받지 않고도 바로 사용할 수 있다. 

벡터 형식의 파일(SVG)로도 다운로드 가능하고, 아이폰에서 요구하는 형식으로도 바로 다운로드 가능하다. 난 아이폰 개발할 때도 여기서 다운받은 아이콘들을 사용한다. 

사실 무료 아이콘을 제공해주는 사이트들이 많긴 하지만, 사용하는 아이콘들이 통일된 디자인이 아니라면 역시 어딘가 이상하거나 허접한 느낌이 들 수 있는데, 굉장히 많은 아이콘 셋트를 제공해주기 때문에 일관된 디자인의 아이콘을 사용할 수 있어서 좋다.

8. Icon Generator - Corona SDK ★★★

안드로이드도 그렇지만 iOS 역시 다양한 해상도의 아이콘 이미지 파일을 요구한다. 1024x1024 이미지 한 장만 업로드 하면, 필요한 다양한 크기로 리사이즈 해주는 사이트다. iOS와 안드로이드 모두 지원한다. 이 사이트 없었으면 엄청난 노가다를 했을뻔했다. 

참고로 안드로이드는 해상도별 PNG 이미지를 사용하는 것 보다 벡터 이미지를 사용하는걸 추천한다. 편집이 어려울 수 있는데 툴 사용법 조금만 익히면 PNG파일로 노가다 하는 것 보다 훨씬 편하다.

비슷한 사이트로 (https://resizeappicon.com/)도 있다. 마음에 드는 곳으로 사용하자.

9. Android Asset Studio 

최근에 알게 된 사이트라서 많이 사용해보지는 않았다. 런처 아이콘이나 알림 아이콘, 나인패치 이미지등을 쉽게 만들어주는 사이트다. 런처 아이콘 만드는것만 써봤다.

9.1 Android Asset Studio - Launcher icon generator ★

위에 소개한 사이트의 서브 항목이다. 런처 아이콘을 만들 수 있다. 누가부터 지원하기 시작한(맞나?) 원 타입의 아이콘을 쉽게 만들 수 있다. 원 뿐만 아니라 사각형 아이콘도 만들 수 있는데.. 이게 구글의 앱들만 놓고보면 괜찮겠지만, 다른 여러 앱의 아이콘과 비교하면 너무 작게 보인다. 

대략 이런 느낌. "사격형"을 선택해서 만들면, "캘린더" 아이콘과 같은 사이즈로 만들어지는데,, 옆에 카카오톡 아이콘과 비교하면,,-_-;;

그림자 효과도 자동으로 줄 수 있고. 참 좋긴한데.. 아직까지는 아이폰 스타일의 아이콘이 사용자들한테 좀 더 익숙하지 않나 싶다. 나중에 아이콘 shape를 선택할 수 있는 OS가 좀 대중적으로 사용된다면 그 때는 이 사이트가 유용하지 않을까 싶다. (아직까지는 그냥 원 모양의 아이콘 만드는 정도로만,,)

10. Thomas Finch - iOS 7+ Icon Generator ★

위에서 잠깐 언급했지만, 안드로이드에서도 아이폰 처럼 둥근 테두리를 주고 싶을 때, 이 사이트를 이용하면 된다. 별 다른 기능은 없고, 업로드 한 이미지에 둥근 테두리를 적용해준다. 

이미지 관련

11. Pixabay ★★★★★

머티리얼 아이콘과 더불어 나에게 가장 큰 도움이 된 사이트다. 이미지가 필요한 경우에 제일 먼저 검색하는 곳이다. 사진 뿐만 아니라 벡터 이미지, 일러스트도 많이 있다. 회원 가입하면 원본 크기의 이미지도 무료로 다운 받을 수 있고, 거의 대부분의 이미지들이 상업적으로 사용 가능하고 출처를 밝히지 않아도 된다. 간혹 공공 목적으로만 사용가능한 이미지가 있긴한데, 지금까지 이용하면서 딱 한 번 봤다. 거의 대부분이 무료라고 생각하면 된다.

비슷한 사이트 하나 더 소개하자면, 일본 사이트인 것 같은데 GAHAG라고 있다. pixabay와 겹치는 이미지들이 많지만 그래도 혹시나 하는 마음에.. 링크 : http://gahag.net/

무료 사이트라서 아무래도 원하는 이미지를 찾지 못할 수도 있다. 그런경우 재정적으로 여유가 있다면 이런 사이트도 이용할 수 있는데.. 그런 사람들이 이 글을 보지는 않겠지..-_-;

12. GRAPHBERRY ★★

최근에 아이콘 검색하다가 찾은 사이트라서 전부 무료인지 아님 일부만 무료인지는 모르겠다. "날씨" 아이콘을 받았는데, 퀄리티가 매우 좋아서 만족스러웠다. 그리고 PSD 원본 파일로 다운받을 수 있어서 포토샵이 있다면 마음대로 편집할 수도 있을 것 같다. 포토샵이 없다면 Paint .net에 플러그인을 설치해서 편집할 수 있다. (나도 포토샵 라이센스가 없어서 이렇게 편집했다. Paint .net은 무료!)

13. remove bg ★★★★ 

최근에 알게된 엄청난 사이트. "누끼"라고 하는 배경을 날리는 작업을 단 몇 초만에 뚝딱 해준다. 퀄리티도 엄청나고 무료로 쓸 수 있다. 개발자한테 이런 누끼 작업은 정말 쉽지 않은 작업인데 이런 고민을 한방에 해결해준다. 포토샵 같은 전문 툴을 구입하지 않아도 되는것 역시 엄청난 장점. 진짜 이 사이트 알려준 분께 절이라도 하고 싶은 심정.

퀄리티가 궁금하신 분은 바로 들어가서 한 번 테스트 해봐도 될 것 같다. 심지어 로그인도 필요 없으니깐.

디자인 가이드

14. 머티리얼 디자인 ★★★

안드로이드 개발자라면 무조건 읽어봐야 되는 가이드. 안드로이드 앱의 전반적인 디자인 가이드라인을 제시한다. 구글에서 공식적으로 한글로 된 가이드는 제공하지 않는 것 같은데, 어느분이 너무 고맙게도 한글로 번역을 해주셨다. 최신 변경사항은 원문을 확인해야 되겠지만, 기본 개념 잡는데는 번역본만 봐도 충분할 것 같다.

15. iOS Human Interface Guidelines 

애플의 공식 iOS 디자인 가이드다. 솔직히 제대로 다 읽어보지 않아서 뭐라고 평가를 못하겠다.

한글로 번역된 글은 아래 링크를 참조. 지금 다시 방문해보니, 최근 출시된 아이폰X의 디자인 가이드도 한글로 올려주셨다. 감사합니다. ㅜㅜ 디자인 가이드 말고도 좋은 글이 많다. 

링크 : https://brunch.co.kr/magazine/dddiary

그리고 아래 링크는 한글로 된 슬라이드. 이것도 괜찮다.

링크 : https://www.slideshare.net/astomusic/ios-human-interface-guidelineshig

16. The iOS Design Guidelines

검색하다가 찾은 글인데, 내용이 괜찮다.

기타

17. Device Metrics

대표적인 안드로이드 기기의 해상도(dp, px), Density(hdpi, xxhdpi 같은..)를 확인 할 수 있다. 폰 기종 뿐만 아니라 와치, 크롬북, 아이폰, 맥북, 서피스북 등의 해상도도 확인할 수 있다. (아이폰은 밑에 소개하는 사이트를 추천한다.)

18. The Ultimate Guide To iPhone Resolutions

아이폰 기기별 해상도를 확인할 수 있다. 

아이패드나 워치에 대한 정보는 아래 링크를 참고하자. (좀 덜 직관적이긴 한데 위에 사이트보다 더 자세하긴 하다.)

링크 : http://iosres.com/

19. 앱 다운로드 뱃지

많이들 봤을 다운로드 뱃지. 그 뱃지를 생성할 수 있는 사이트다. 그냥 대충 쓰면 되는 줄 알았는데 은근히 요구하는 조건이 되게 많다. 배경색 바꿔도 안되고, 기울여도 안되고.. 등등 뭐 이런저런 것들이 많다. 

어쨌든 본인이 만든 앱을 블로그나 홈페이지 같은 다른 채널을 통해서 홍보하고 싶다면 여기서 뱃지를 다운받아서 쓰면 된다.

아이폰 : https://developer.apple.com/app-store/marketing/guidelines/#downloadOnAppstore

20. Android UI OpenSource

오픈소스야 워낙에 많고 다양해서 여기에 추가 안하려고 했는데.. 이쁜고 신박한 것들만 엄선해서 모아놓은 듯 해서 추가해본다. 사이트를 방문하면 움짤로 보여주기 때문에 따로 설명이 필요 없을 것 같다.

21. 눈누 ★★★

상업용으로도 무료로 사용 가능한 폰트들을 모아놓은 사이트다. 기존에는 블로그 검색등을 통해서 발품팔며 폰트들을 찾아야 했는데 이젠 그냥 여기서 한번에 찾아볼 수 있다. 이미 알고 있던 폰트들 말고도 개인이 제작해서 블로그를 통해 배포하는 폰트들도 찾을 수 있어서 좋았다. 

참고로 APK 파일에 임베딩 하는 형태로 사용하는걸 제한하거나 사전 승낙을 받아야 되는 폰트들도 있기 때문에 정확한 사용조건이나 라이센스는 꼭 확인 한 다음에 사용하자.