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

상업적 이용 가능한 무료 이미지 사이트

제품을 만들 때 신경쓰이는 것 중에 하나가 사진 등을 사용할 때 저작권의 제한 부분입니다.

가령 저희는 이미지를 구매해서 제품에 제공하더라도 제품을 사용하는 구매자가 제품에 제공한 사진을 SNS에 다시 올릴 경우 해당 이용자는 이미지를 구매한 경우가 아니기 때문에 저작권이 복잡해집니다. 한국저작권위원회(http://www.copyright.or.kr/)에서 확인해 보니, 어찌됐건 이용자는 해당 이미지를 함부로 사용할 수 없는게 사실입니다. 사용자들을 저작권에 위배되기 쉬운 형태로 서비스를 개발 할 수는 없으니 그럴 때는 CC0라이센스를 사용해야 합니다.

이것저것 생각하기 싫을 때는 그냥 CC0 이미지를 사용하시면 됩니다.

무료 이미지를 찾아다닐 때 다양한 사이트가 있습니다.

그 중에서 제가 자주 사용하는 사이트 세 개입니다.

1. https://pixabay.com/

국내에 가장 많이 알려진 pixabay.com 입니다.

다양한 사진이 많아서 자주 이용하는데요. 높은 퀄리티의 이미지도 많지만 찾는 것은 조금 번거롭습니다.

태그의 한글 검색을 지원한다는 것이 특징입니다.

2. https://unsplash.com/

10 일에 10 장씩 높은 퀄리티의 고해상도 이미지가 올라옵니다.

다른 곳은 api 연동을 위한 Key 등을 발급받아야 하는데. https://source.unsplash.com/ 에서 설명하듯이

간단하게 https://source.unsplash.com/random/1600x900 같은 형태로 주소만 넣어줘도 이미지를 제공해서 개발자 입장에서는 테스트시 편합니다.

이미지 크기는 랜덤으로 추출한 이미지에서 해당 설정값으로 자동으로 잘라져서 보입니다.

높은 퀄리티의 이미지가 많아서 자주 사용합니다.

3. https://www.pexels.com/

높은 퀄리티의 이미지가 많아서 자주 사용하는 사이트입니다.

unsplash만 쓰다가 다른 쓸만한 사이트가 있는지 찾다가 발견한 사이트입니다.

역시나 CC0 라이센스 입니다.

이미지에는 벡터 이미지나 일러스트 등의 다양한 분야를 포함하지만

위 사이트들은 대부분의 고해상도의 사진이미지가 필요할 때 사용합니다.

위 세 개의 사이트면 대부분의 사진 이미지는 해결이 가능합니다.

이상 eedler 개발팀입니다. 감사합니다.

TISTORY에 소스코드를 넣어보자.

구글에서 검색을 해봤는데 사람들은 

Syntax Highlighter 를 사용하는 사람들이 대부분이었습니다. 그래서 필자도 해당 사이트로 날아갔으나,

세상에. Swift가 지원되지 않더군여.

저희 팀에서는 주로 MEAN을 위한 javascript 와 iOS App을 위한 swift 를 사용하고 있습니다.

그래서 swift 소스코드를 추가하는 기능이 필요한건데... 그래서 조금 더 찾아보니.

https://highlightjs.org/ 에서 제공을 해준다고 합니다.

Swift도 있고 CDN도 지원을 해주는 듯 싶었으나.... CDN 버젼에서는 Swift를 지원하지 않더군요.

그래서 어쩔 수 없이 다운로드해서 업로드 하는 방식으로 써야했습니다.

common에서 지원해주는 언어에 사용하시는 언어들이 들어있다면 단순히 cdn의 주소만 넣는 방식으로 쓰시면 편할듯합니다.

전체 순서는

1. 사이트에서 관련 파일 다운로드

2. 티스토리에 업로드

3. 코드 추가

1. 사이트로 이동 https://highlightjs.org/ Get version x.x.x 를 클릭합니다.

2. 아래처럼 cdnjs 주소도 보이는데여. 아래 common에 있는 언어만 사용하신다면 그냥 저 cdn 주소만 사용하셔도 됩니다.

아래는 기본적으로 제공해주는 언어의 목록입니다. cdn에서도 22개의 언어에 대해서 제공해주고 있으니,

이 안에 목록에 포함되실 경우 파일 다운로드 없이 위의 cdn주소만 추가해서 사용하셔도 됩니다.

전 Swift 가 필요했으므로, 아래쪽에 Custom에서 Swift 체크 후 다운로드 했습니다.

그러구나서 압축을 풀고. 티스토리 관리자 페이지로 갑니다.

아래 HTML/CSS 편집 메뉴를 클릭해줍니다.

파일업로드를 클릭해주시고, 아까 다운받은 파일에서 압축해제 했던 파일 중.

highlight.pack.js 파일과 style 폴더 안에 있는 원하는 스타일의 파일을 업로드 해줍니다.

전 스타일 고르기 귀찮아서 일단 다 업로드 했습니다.

이제 코드를 추가해줘야 합니다. HTML 버튼을 클릭해 줍니다.

아래 <link>와 <script> 태그들 사이에 아래 소스를 붙여줍니다.

물론 css 스타일은 default.css 가 아닌 원하는 스타일 파일로 작성해 주시면 됩니다.

개인적으로 default를 좋아해서 저흰 그냥 default ^^

<link rel="stylesheet" href="./images/default.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

이렇게여.

설정할 부분은 끝이 났고, 이제 사용만 하시면 됩니다.

사용법은 글 작성시 글 작성란에서 HTML 체크박스를 체크해주시고,

작성법은

<pre><code class="swift">//소스 코드

NSLog("Hello World!")

</code></pre>

라고 작성하시면 됩니다.

그러면 결과가.

//소스 코드
NSLog("Hello World!")

이렇게 나옵니다.

 class에는 자신이 표현하고자 하는 언어를 넣어주시면 됩니다.

그러면 글 보기를 할 때 해당 언어에 맞게 이뿌게 표시됩니다.

감사합니다.

ATOM 설치 방법을 작성합니다.

ATOM은 GitHub에서 공개한 텍스트편집기입니다.

무료이며, 다양한 패키지가 존재해서 기본 기능 외에도 다양한 기능을 추가적으로 설치하여 사용할 수 있습니다.

git과 연동되어 작업시 쉽게 구분이 가능합니다.

대부분 사용자의 경우 윈도우를 사용하므로 윈도우 기준으로 설명을 작성합니다.

설치는 매우 간단합니다.

우선 ATOM 공식페이지로 이동합니다.

https://atom.io/

아래 이미지의 [Download Windows Installer] 버튼을 클릭합니다.

파일다운로드가 진행됩니다.

해당 파일에서 우클릭 후

관리자 권한으로 실행으로 실행을 해주시면 됩니다.

Next를 클릭할 필요도 없이 설치 바로 진행되고 설치가 완료되면 자동실행이 됩니다.

패키지 설치

ATOM 은 각종 패키지를 설치해서 다양한 기능을 사용할 수 있도록 지원합니다.

File > Settings 를 클릭합니다.

Install을 클릭합니다.

Search packages 란에 설치하고자 하는 패키지명을 검색하면 아래 목록에 바로 표시가 됩니다.

아래 목록에서 Install 버튼을 클릭하면 바로 설치가 진행됩니다.

제가 주로 사용하는 패키지들을 소개합니다.

minimap : 화면 한 쪽에 파일 전체 내용의 미니맵이 표시됩니다. 서브라임텍스트를 사용하셨던 분이라면 익숙한 기능입니다.

AtomicChar : 한글을 한 줄로 길게 쓸 때에 개행이 이상하게 되는데, 그 문제를 해결해줍니다.

emmet : zen-coding 이라고도 합니다. html 등의 문서를 작성시 css selector 방식으로 구조화된 구문을 빠르게 작성합니다.

highlight-selected : 한 페이지에서 선택되어진 단어와 동일한 단어를 표시해줍니다. 기본인줄 알았는데, 안되서 찾아보니 패키지가 있더군요.

Remote-FTP : FTP 또는 SFTP, FTPS 를 이용해 원격지에 있는 파일을 다운로드 하고 수정하고 저장과 동시에 업로드가 가능합니다.

linter : 다양한 문법적 오류를 표시해주는 유용한 패키지입니다. 설치 후 프로그램 언어별로 추가 설치하면 문법적 오류나 권장 내용에 대해 색상과 문구로 알려줍니다.

linter-jshint : linter 의 Javascript 버젼입니다. 최근 제가 사용하는 언어가 웹 서버 관련 작업은 Javascript가 대부분이라 필수입니다.

linter-csslint : linter 의 CSS 버젼입니다. 웹 작업시 없어서는 안될 .CSS 파일 작성시 관련 정보를 표시해줍니다.

ATOM을 쓰면서.

편의적인 부분은 굉장히 만족합니다. 기본적인 서브라임텍스트와 같은 형태의 단축키와 구성으로 되어 있어서 처음 사용할 때도 별로 어색하지 않았습니다.

하지만 몇 가지 불편한 점은 속도에 관한 이슈가 발생한다는 것입니다.

파일이 길 경우 highlight가 느리게 반영되며, 심지어 파일이 과도하게 길 경우에는 ATOM 자체가 멈춰버리는 현상도 발생합니다.

그리고 패키지가 안정화되지 않은 부분이 있는지 FTP관련 패키지는 사용시 목록을 제대로 반영하지 못하는 등 자잘한 버그들이 존재합니다.

그럼에도 불구하고, 익숙한 UI를 제공하고, 서브라임이나 노트패드++와 같이 각종 패키지를 설치해서 사용할 수 있다는 매력은 굉장합니다.

무엇보다 무료. 이걸로 끝이죠.