eedler

최근 앱 JustOneLIne(https://goo.gl/q5wpte), CCWidget(https://goo.gl/YUbPqd) 을 제작하면서 디자인 관련해서 참고했던 부분들을 기록해놓으려고 합니다.

이들러(eedler)는 1인 개발팀 입니다.

처음부터 디자인관련 일은 해본 적도 없구. 감각이 평균 이하입니다.-_-;

하지만 혼자라도 해보자고 결심한 이상 못한다고 안할 수는 없었습니다.

1인 체계를 생각할 때 가장 먼저 고민했던 부분이었습니다.

디자이너가 없다. 하지만 난 고용할 돈도 없다.

그 때 생각은 '되는대로라도 해보자. 까짓꺼!' 라고 생각했지만... 힘든건 사실입니다. ^^;;

자금적 여유가 되신다면 라우드서비스(http://www.loud.kr/)를 추천합니다.

라우드는 콘테스트형식으로 디자인을 공모할 수 있습니다. 특정 금액을 제시하고 디자인에 관한 사항을 설명하면,

여러 명의 디자이너가 응모하는 방식입니다. 여러 개의 디자인 중 마음에 드는 디자인을 선택하면 공모 금액이 디자이너에게 전달되며, 해당 소스파일도 받을 수 있습니다. 계속적으로 디자인 요소가 필요한게 아니라면 단순 로고나 아이콘, 특정 색상 패턴 등을 구하고자 할 때 유용합니다.

하지만 저희는 자금적 여유가 없으므로 ^^;;

할 수 있는 방법은 최대한 외부의 다양한 자료를 참고하는 것이었습니다.

그 동안 사용했던 서비스 및 참고사항들을 정리해보았습니다.

역시나 이 포스트의 목적도 공유라기 보다는 추후 다른 팀원이 생겼을 때 저희의 궤적을 손쉽게 알리고, 추후 유지보수 시 참고하기 위함입니다.

순서

0. 홈페이지

1. 홈페이지 레이아웃 및 디자인

2. 색상

3. 폰트아이콘

4. UI

5. 이미지

0. 홈페이지

부트스트랩 http://getbootstrap.com/

부트스트랩은 트위터에서 시작한 html, css, js 프레임워크입니다. mit라이센스라서 더 없이 감사할 따름입니다.

저희는 웹에서 작업시 부트스트랩기반의 테마는 선택의 여지가 없었습니다.

개발자나 디자이너 사이에서는 부트스트랩을 써야한다, 쓰지 말아야 한다. 의견이 분분하지만 저희 같은 소규모 그룹에서는 쓸 수 밖에 없습니다.

독창적이고 개성이 넘치는 디자인과 인터페이스는 당연히 있으면 좋지만 그런 것까지 고려할만큼 여력이 없었습니다.

그래서 웹 작업시 부트스트랩 기반의 테마들을 주로 사용하였습니다.

저희의 홈페이지 http://www.eedler.com 또한 부트스트랩 기반으로 작업되어 있습니다.

1. 홈페이지 레이아웃 및 디자인

홈페이지가 필요했습니다. 디자이너가 없는 것이 형편없는 홈페이지를 가져도 고객들이 용납한다는 뜻은 아닐겁니다.

그래서 찾은 곳이 http://startbootstrap.com/ 입니다.

부트스트랩 테마 & 템플릿이 있습니다. 이곳에서 무료 템플릿을 받아서 약간만 수정하면 화려하진 않지만 단일 페이지짜리 구색은 갖출 수 있겠다고 생각했습니다.

소규모 그룹일 경우 홈페이지를 완전히 새로 만드는 것은 사실 쉽지 않습니다. 더군다나 요즘따라 모바일 접속자가 굉장히 많은 경우 디바이스 크기에 따라 반응적인 화면을 구성해야 하는데, 그걸 처음부터 직접 작업한다는 것은 홈페이지 작업만 해도 상당 시간 공을 들여야 합니다. 모바일 대상의 웹 html, js, css를 직접적으로 다뤄본 개발자라면 다들 공감하실겁니다.

최근엔 자신들의 본연의 서비스에 집중하기 위해 고객과의 소통은 소셜채널, 페이스북 페이지, 블로그 서비스, 트위터, 블로거, 텀블러 등의 서비스 등을 이용하는 스타트업도 상당히 많습니다. 기존에 잘 구성되어 있는 서비스를 이용하는 것은 다방면에서 저희에게 큰 매력입니다.

물론 그런 서비스로도 어느정도는 커버가 되지만... 저희도 홈페이지 하나가 갖고 싶었습니다. >,.<;;

디자인과는 약간 동떨어진 이야기지만 잠시 홈페이지 구축에 관한 이야기를 하겠습니다.

그래도 홈페이지 화면이라도 하나 띄워놓고 싶다면 최근 무료로 웹사이트를 만들어주는 빌더들을 사용하시는 것도 고려해 보시기 바랍니다.

저는 사용해본적이 없으나 다들 좋다고 난리인  https://wix.com  가 있습니다.

어느정도 학습이 가능하시다면 워드프레스를 추천드립니다.

https://ko.wordpress.org/

블로그나 홈페이지 구축시 상당히 시간을 단축시킬 수 있으며, 사실 매우매우 좋습니다. 저희는 구색을 위해 한 페이지 짜리 홈페이지가 필요해서 특별히 사용하진 않았지만 자기만의 독특한 기능이 있지 않고 표준적인 형태의 홈페이지를 구축하길 원하신다면 추천드립니다. 그 안에서의 플러그인들과 테마들은 워드프레스를 선택할 충분한 이유입니다.

http://www.eedler.com

eedler 홈페이지의 경우 저희는 카페24의 가장 저렴한 웹호스팅 서비스를 이용하고 있습니다. 특별한 기능은 없이 랜덤한 테마 변경과 founder에게 메일만 보낼 수 있고, 사용자들의 사용 언어를 판별하여 앱스토어 주소를 언어에 맞게 연결해주는 단순한 기능만 들어가있습니다. 홈페이지 언어는 php로 작성되어 있는데 php 언어의 선택 이유는 그 서비스가 가장 싸기 때문이었습니다.^^;;

지금 읽고 계신 해당 블로그는 http://www.tistory.com/ 서비스를 이용하고 있습니다. 네이버 블로그보다 자유도가 높고 단순한 형태라서 마음에 들었습니다. 이런 형태를 이용한 이유는 단순히 접근하기 쉬웠기 때문입니다. 모르는게 있을 때 빠르게 검색해서 빠르게 적용하고 싶었기 때문입니다. 게다가 테마를 이용할 수 있고 그게 이뿝니다. 직접 하는 것보다 훨씬 더 ^^.  없어보이면 안되기 때문에, 그렇지만 유일무이한 페이지를 만들 수는 없었기에 이런 표준적인 서비스가 저희에게 맞다고 판단하였습니다.

2. 색상

색상조합은 디자이너가 없는 저희에게는 최악의 과제입니다.

이것 때문에 여전히 고민하고 생각하고 찾아보고, 물어보고 하면서 하지만... 여전히 저희 팀의 앱이나 웹은 촌스럽습니다. -_-ㅋㅋㅋ

완전 초창기의 앱은 90년 대에 스마트폰앱이 있었다면 나올 법한 디자인이다. 라는 평가를 지인으로부터 들었습니다.^^;;

그 때문에 CCWidget 이라고 하는 환율계산기 앱은 지금 완전히 새로운 형태의 2.0을 작업 중입니다.

그래서 참고할 자료를 열심히 찾았지만 ... 하지만 알게 됐죠. 참고할 자료가 있어도 그걸 조합할 능력이 있지 않다면 소용 없다는걸요 -_-ㅋㅋㅋ

결국 JustOneLIne(https://goo.gl/q5wpte) 이라는 앱은 흑백을 바탕으로 나왔지만 그 흑백바탕도 다양한 조합을 찾아보고 색상을 선택하였습니다.

어찌됐건 저희는 색 조합에 대해서 많은 고민을 했고 자료를 찾았습니다. 찾아봐서 참고했던 목록들을 소개합니다.

색상 조합은 http://www.colourlovers.com/ 에서 참고하였습니다. 

인기순, 선호도순으로 정렬도 지원해서 이런저런 생각들을 다양하게 볼 수 있습니다.

또다른 색상세트는 https://color.adobe.com 에서 찾으면 많습니다.

역시나 처음부터 직접 하는 것보다는 사람들의 검증을 통한 색상세트를 참고해서 재창조 하는게 훨씬 낫습니다.

3. 폰트아이콘

저희는 사실 글꼴이 그리 민감한 편이 아니라 시스템글꼴만 사용하기로 결정하였습니다. 제일 유명한 글꼴은 역시나 나눔글꼴입니다. 어디서나 유용하고 대부분의 개발자 및 디자이너 분들은 알고 계신 폰트일테니 따로 설명할 필요가 없을 것입니다. 글꼴을 찾아볼까 했으나 사용할 수 있는 라이센스 등을 찾아서 확인하는 것도 저희에겐 과제라 그 부분은 무시하고 싶은 마음도 있었습니다. JustOneLIne 같은 경우 랜덤으로 변하는 카드 형식의 상세보기가 글꼴도 바뀌었으면 하는 초반의 기획도 있었으나, 작업시 이리저리 바뀌는 레이아웃, 글씨 사이즈에 글꼴까지 바뀌니 정신이 없어서 글꼴의 랜덤작업은 제외되었습니다.

Font Awesome  http://fontawesome.io/ : 앱, 웹 등에서 아이콘 작업을 할 때 필수입니다.

FontAwesome의 경우 추후 다른 포스트로 다시 다룰 생각입니다.

iconfinder  https://www.iconfinder.com/ 말 그대로 아이콘 찾아줍니다. ㅋㅋ 

찾아보면 무료도 있어서 무료에서만 잘 활용하셔도 더 없이 좋은 곳입니다.

4. UI

UI는 http://ui-cloud.com/ 의 도움을 많이 받았습니다.

여기서 UI를 보고. 이런저런 기획을 변경하고 바꿀 수 있었습니다.

저희는 여기서 어떤 특정 UI를 채택해서 다운받거나 하진 않았지만 다양한 발상을 해볼 수 있는 곳으로 상당히 도움을 받았습니다.

그리고 디자인셋이 있다고 해도 그걸 자신의 제품에 적용하는건 또 다른 문제라는걸 여기서 절실히 느끼고 안타까워했었습니다. ^^;;

5. 이미지

https://unsplash.com/, https://pixabay.com/

사진관련 내용은 http://blog.eedler.com/9 에 정리해놨습니다.

물론 잘 나가는 팀은 외주도 주고 직원도 쓰고 하면 제품의 퀄리티가 확 올라가지만 저 같은 초기에 시작하는 입장에서는 외주는 쉽지 않습니다.

1인 기업은 대부분 리소스가 부족합니다. 저희도 마찬가지구요. 그에 따라 최선을 다해 외부 자료나 참고자료를 뒤져서 최대한의 효과를 보기 위해 노력했습니다.

이 글이 혼자서 뭔가를 해보려고 하는 다른 개발자 분들에게 도움이 되었으면 좋겠습니다.

이상 eedler였습니다. 감사합니다.^^

ps.

 https://color.adobe.com, http://ui-cloud.com/, https://www.iconfinder.com/ 등의 사이트는 더데이비포 라는 디데이 앱을 만들고 운영하는 ibillstudio의 이선재 대표님으로부터 추천 받았습니다. 이 사이트 외에도 다양한 관련 정보를 주셔서 늘 감사하고 있습니다.^^;

앱스토어 주소

JustOneLine : https://goo.gl/q5wpte

CCWidget : https://goo.gl/YUbPqd