JustOneLine 아이콘선별과정


JustOneLine 을 만들면서 제품을 출시하려는데 걸림돌이 아이콘이었습니다.

저희는 전문디자이너가 없고, 라우드(http://www.loud.kr/) 같은 곳에 아웃소싱을 주거나 위시캣(https://www.wishket.com/) 같은 곳에서 프리랜서를 구해서 의뢰할만한 규모도 아니며, 결정적으로 돈이 없었으므로. 가장 단순한 형태로 우리의 제품을 설명하는 아이콘을 만들고자 하였습니다.


AI를 이용하고 싶었으나, 할줄 몰라서. 간단히 포토샵의 단순단순 기능으로만 하고자 하였습니다.


  




 



 



 



 



 



 



 


여러 개를 만들었으나, 사실 쓰이는건 하나입니다. 감각없는 사람끼리 모여서 작업하다보니 결과 또한 미천합니다. -_-;

처음엔 JustOneLine 글씨를 넣기 위해 이렇게 저렇게 만들었습니다. 사진은 하나만 남았는데. 그 전에 한 줄짜리부터 다양한 글자크기까지 더 있었으나, 당시에는 이렇게 많아질지 모르고 저장을 안해놨습니다.

그 후에는 한 줄만 쓰는 앱의 특징에 맞도록 흰색 글씨가 써지는 부분을 표시했습니다. 틀을 나누기도 하고. 틀의 위치를 변경하기도 하였습니다.

글씨가 흰색이라는 것을 살리기 위해 글자를 흰색 동그라미로 표현하기도 하였는데, 역시나 별로 안예뻐서 폐기했습니다.

결국은 가장 단순한 형태로 흰색의 한 줄과 그 약간 어두운 흰줄 배경색, 약간의 그라디에이션이 들어간 아이콘이 결정되었습니다.


결론.

아이폰 앱 아이콘의 라운드는 제어하려면 쉽지 않다.

배경색에 따라 아이콘이 눈에 띄기도 하고 아니기도 하다.

클 때 이뿐게, 작을 때도 이뿌다는 뜻은 아니다.

대부분의 아이콘이 화려하고 밝은 계열이라 검정색 계열을 선택했는데, 핸드폰 배경그림이 어두운 색이면 오히려 더 눈에 안띄는 경향이 있다.

이렇게 하나로 두고보니 부끄럽네요 -_-; 생각의 과정을 남겨둔다면 다음번에 같은 순서로 생각을 확장하던지, 아니면 시행착오를 줄일 수 있을 것 같아 기록으로 남깁니다.


감사합니다.

  1. 2018.05.24 23:00

    비밀댓글입니다

  2. 2018.07.08 14:31

    비밀댓글입니다

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


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

가령 저희는 이미지를 구매해서 제품에 제공하더라도 제품을 사용하는 구매자가 제품에 제공한 사진을 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 개발팀입니다. 감사합니다.

  1. 2017.06.08 17:26 신고

    http://www.freeqration.com 사이트도 무료 이미지 큐레이션 사이트라 저작권 상관없이 사용할 수 있어서 좋더라구요~

swift - 랜덤함수. 임의의 수 추출하기


이렇게 작성하시면 됩니다.

아래처럼 작성하면 0에서 9까지의 정수를 반환합니다.

//랜덤함수 사용하기
let randomNo: UInt32 = arc4random_uniform(10);


물론 arc4random 함수도 있고, 실수를 반환하는 방법도 있지만  자주 쓰지 않아서 일단 이걸로 웬만한건 다 해결합니다.


그러면 1 부터 10까지는 어떻게 하느냐?

//랜덤함수 사용하기
let randomNo: UInt32 = arc4random_uniform(10) + 1;

이러면 됩니다. 단순히 시작지점을 더해주신다고 생각하면 쉽습니다.


//랜덤함수 사용하기
let randomNo: UInt32 = arc4random_uniform(범위) + 시작지점;

10부터의 랜덤숫자를 원하시면 + 10을 해주면 되겠죠?

이상 eedler 개발팀입니다.

iOS - 위젯 왼쪽의 여백을 없애자.


Widget 관련 개발을 하게 되면 가장 먼저 찾아보게 되는 항목입니다.

기본적으로 위젯은 뷰를 추가해서 내용을 보여줄 경우 왼편에 마진이 존재합니다.


이렇게 말이죠.


하지만 사정에 따라 왼쪽의 여백을 넣고 싶지 않은 경우가 있는데요.

그럴 경우 위젯의 마진을 수정해주는 함수 하나만 선언 해주시면 됩니다.

해당 위젯 ViewController에

func widgetMarginInsetsForProposedMarginInsets(defaultMarginInsets: UIEdgeInsets) -> UIEdgeInsets {
    //return defaultMarginInsets        
    return UIEdgeInsetsZero
}

라고만 작성해 주시면 됩니다.

혹시 작업 중 원래의 여백을 적용하고 싶다면, 주석처리 되어 있는 return deaultMarginInsets 구분을 사용하시면 됩니다.


그러면 아래처럼 여백이 없어진 형태로 보이게 됩니다.


간단하죠?


여기까지 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에는 자신이 표현하고자 하는 언어를 넣어주시면 됩니다.

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


감사합니다.

  1. 3794 2017.04.02 15:58 신고

    highlightjs 가 좋네요ㅋ 제 블로그에 설치 했습니다. 감사합니다.

+ Recent posts