아이프렌즈펫 월드컵 응원 사진들

작성자: -











댓글

댓글 쓰기

주간 인기글

[앱 디자인] 디자인 가이드 만들기 - 안드로이드

작성자: -
이미지
*아이프렌즈펫 앱 디자인 가이드 경험을 공유합니다. 이게 처음 작업한 앱 디자인 가이드라서 미흡한 점이 많을 수도 있는데 문제가 있는 부분이 있다면 댓글로 알려주시면 반영하겠습니다 ^^

* 안드로이드 앱 디자인 가이드 작업의 특징

안드로이드의 해상도입니다


보시다시피 어마어마하게 많습니다 ^^ 이 모든 해상도를 일일이 지원할 수가 없어요~
그래서 몇 가지 대표적인 해상도를 지원하는 방향으로 가이드를 잡고 이미지 작업을 합니다.

아이프렌즈펫의 경우에는 저해상도, 중간 해상도, 고해상도 3개를 지원해서

720 x 1280
1080 x 1920
1440 x 2560

이 세 가지로 이미지를 오렸구요, 가이드는 720 x 1280 기준으로 작업했습니다.

*좌표
안드로이드는 상대 좌표로 작업합니다. 워낙 다양한 폰 사이즈 때문에 절대 좌표로 잡기 어려워요. 그래서 가이드에 중요한 정보는 좌표보다는 간격, 크기입니다.

*색상값 
#123456 헥사 컬러 코드를 주로 사용합니다. 가이드에 이 값을 표기해주세요.

*이미지 작업
수치값 계산 작업을 했다면 아이콘 등등을 잘라서 PNG 로 공유합니다.

이건 당연히 해상도별로 아이콘을 오려야 하는데요... 수치값은 720 기준으로 했다 하더라도 1440 등 다른 해상도 기준으로도 아이콘을 잘라드려야 합니다.

따라서 당연히 이미지는 Vector 아이콘으로 작업하셔야합니다 ^ㅁ^ Ctrl + I 눌러서 해상도 크기 늘리시면 되구요 (디자인 경력 1개월 미만을 위한 충고 ㅋ )

이미지 버튼의 경우
단순한 사각형, 원형 같은 버튼의 경우 코딩으로 작업이 가능하지만 특별한 모양의 버튼의 경우 이미지를 잘라드려야 하는데요, 버튼을 자를 때는 기본적으로 세 가지 상태에 대해서 만들어 주셔야 합니다. (경우에 따라 한두가지 필요없는 게 있을 수 있구요)



* 나인 패치

안드로이드에서는 앱 퍼포먼스를 높이기 위해 최소한의 그래픽으로 화면을 표현합니다. 그래서 나온 특별한 것이 '나인 패치'인데요.


이렇게 생긴 이미지 파일이구요 (단순 PNG) 아래…
자세한 내용 보기

[부트스트랩] 소개와 사용 방법

작성자: -
이미지
부트스트랩 소개  부트스트랩은 웹 디자인을 어떻게 하며 편리하게 할 수 있을까하는 목적에서 나온 프레임워크입니다.  실제로 부트스트랩을 활용하면 웹 디자인에 쏟아야 하는 노력을 절반이하로 줄일수 있으며, 특히 반응형 웹에 대한 고민을 혁신적으로 해결해 줄 수 있습니다.

 부트스트랩은 Mark Otto와 Jacob Thornton에 의해 Twitter에서 개발되었으며, GitHub에서 2011 년 8 월 오픈 소스 제품으로 출시되었습니다.



부트스트랩 설치  부트스트랩 설치는 부트스트랩 사이트에서 다운로드 받은 후 크게 3가지 방법으로 사용할 수 있습니다.
웹서버에 올려서 사용하는 방법CDN(Contents Delivery Network)을 이용하는 방법Bower라는 패키지를 이용하는 방법
 가장 많이 이용하는 방법은 웹서버에 이용하는 방법이며, 2번째 방법은 CDN 상황에 종속적으로 되어 간혹 느려지는 경우가 발생될 수 있습니다. bower는 별도의 패키지관리 도구이며, 자세한 내용은 http://bower.io를 참고하시면 됩니다.

자세한 내용 보기

[앱 디자인] 디자인 가이드 만들기 - 아이폰

작성자: -
이미지
*아이프렌즈펫 앱 디자인 가이드 경험을 공유합니다. 이게 처음 작업한 앱 디자인 가이드라서 미흡한 점이 많을 수도 있는데 문제가 있는 부분이 있다면 댓글로 알려주시면 반영하겠습니다 ^^

*아이폰 앱 가이드 작업의 특징

디자인 가이드 작업은 기준 해상도 하나를 정해서 그 수치값으로,
이미지 작업은 고객/개발자와 협의한 모든 해상도를 지원하는 방향으로 작업하면 됩니다.

아이폰 해상도를 먼저 보면


위에 point 가 실제 폰에서의 크기라면 render at 사이즈는 디자이너가 포토샵에서 작업해야 할 픽셀 단위 사이즈라고 보시면 됩니다.

아이프렌즈펫은 일단 기준 해상도를 iPhone6 으로 잡고 가기로 했습니다. 그래서 포토샵에서 작업할때는 750 x 1334 사이즈로 작업해서 해당 작업물로 좌표값, 크기 등을 계산해서 개발자님께 넘겼구요

만약 iPhone5 를 기준 해상도로 잡았다면 640 x 1136 을 기준으로 포토샵 화면 작업을 해서 넘기시면 됩니다. 그러면 개발자는 디자이너가 계산해 넘긴 수치값의 1/2 을 곱하거나 1.5 배 하는 등 계산을 해서 작업을 하게 됩니다.


여기서 알 수 있는 사실은, 포토샵에서 드리는 수치가 최종값이 아니기 때문에 가급적 모든 수치가 짝수가 되고, 맞아 떨어지는게 좋습니다. 그래야 개발자가 나누고 곱해도 소수점이 나오지 않기 때문이죠. 그래서 아이프렌즈펫 작업을 할때는 한 이미지로 여러 해상도를 지원해야 하기 때문에 가급적 6의 배수로 크기를 계산한 작업물을 드렸습니다.


*좌표



아이폰은 절대 좌표로 작업합니다. 그러니까 상단 Status Bar 밑에 0,0 찍어놓은 저 곳을 기준으로 절대 좌표를 계산해서 가이드를 만들면 개발자가 그곳을 기준으로 위치를 계산해 넣습니다. 이것도 개발자마다 다를 수 있으니 작업 전에 좌표 기준을 어디로 할지 한번 확인해 보시는 게 좋을 것 같구요.
아이프렌즈펫의 경우 아이폰은 750 하나만으로 작업하고, 그 외에는 자동으로 이미지 사이즈나 위치가 조정되는 방향으로 했습니다. 아마 이건 앱마다 상황이…
자세한 내용 보기

SPA(Sigle Page Applications) 란 무엇인가?

작성자: -
이미지
먼저 SPA (Single Page Application)가 필요한 이유부터 살펴 보면, 단일 페이지 응용 프로그램은 수년간 사용되어 왔지만 일반적인 웹상에서는 찾아보기가 어렵습니다.

그렇지만, 앞으로 많은 웹사이트가 SPA로 개발될 아주 좋은 계기가 있습니다.

SPA는 SaaS (Software as a Service) 플랫폼 또는 인터넷 서비스의 상황판 같은 대시보드 부분을 구축하고 기업의 데이터 기반 및 폼 기반 애플리케이션을 구축하기 위해 지난 몇 년 동안 많이 채택되어  왔으며, 추후에 개발될 웹 어플리케이션에서 우선적으로 고려될 것으로 예상되어 집니다.



그러면 Angular2(이하 Angular)로 개발하는 어플리케이션은 SPA로 개발해야 하는 건가요?

처음 Angular2를 접하게 되면 당연히 SPA로 개발 된다고 생각할수 있지만, 다르게 구축할 수도 있습니다.



SPA는 단순하게 다음과 같이 정의해 볼 수 있습니다.

1개의 페이지만 있는 어플리케이션

실제 SPA 확인해보고 싶으시면 남도패스 사이트(https://m.namdopass.co.kr)를  방문해보면 알수 있습니다.

하단의 홈/지역별/로그인/남도패스 각각 메뉴를 이동해 보면 실제 하나의 페이지에서 내용만 바뀌는 것을 확인할 수 있습니다.

웹사이트를 둘러보기를 시작하면 페이지가 완전히 다시 로드되지 않는다는 것을 알 수 있습니다. 화면 전환 시마다 REST API 서버를 통해 데이터를 바인딩하고 있습니다.

그럼 SPA 구축 할 때의 장점은 무엇이며 어떻게 작동하는지 살펴보면

남도패스 사이트(https://m.namdopass.co.kr) 첫화면을 소스보기 해보면

자세한 내용 보기

[AWS] Windows 에서 Linux 인스턴스 연결을 위한 PuTTY 사용방법

작성자: -
이미지
AWS 콘솔을 통하여 EC2 인스턴스를 생성하게 되면 SSH 접속을 위한 Key pair 를 사용하게 됩니다.
Namsan.pem 과 같이 pem 형식의 파일을 다운로드 받을 수 있습니다.

Mac 사용자의 경우 pem 파일을 이용해  Linux 인스턴스에 접속이 가능하지만

Windows 사용자의 경우에는 PuTTy 에서 PEM 파일을 지원하지 않기 때문에
별도의 PPK 파일을 생성하여야만 Linux 인스턴스에 접속이 가능합니다.


필요한 프로그램을 다운로드 하기 위해 puTTy 다운로드 페이지로 이동합니다.
https://www.chiark.greenend.org.uk/~sgtatham/putty/

해당페이지에서  puttygen.exe 파일과  putty.exe 파일을 다운로드 합니다.

1. puttygen 을 통한 PPK 파일 생성
다운로드한 puyttygen 을 실행한 화면 입니다.




Conversions – import key 메뉴를 선택합니다.




EC2 인스턴스 생성시 다운로드한 PEM 파일을 선택 합니다.
아래와 같이 Key 파일이 import 됩니다.



Type 을 SSH-2 RSA 로 선택한 후
Save private key 버튼을 클릭합니다.





파일생성시 암호문을 설정하지 않았다는 경고창이 팝업되지만
“예” 를 선택하고 넘어가면 됩니다.





탐색기에서 생성할 키파일을 입력하고 “저장” 합니다.


이제 putty 접속시 사용할 PPK 파일 생성이 완료 되었습니다.

이제 Linux 인스턴스에 접속해 보겠습니다.


2. putty 를 통한 인스턴스 접속
PPK 생성이 완료되면 이제 putty 를 통해 인스턴스 접속이 가능합니다.

putty.exe 를 실행합니다.



Host Name 에  username@public_Ip   형식으로 이름을 입력합니다.

이때 인스턴스 생성시 설정한 AMI 별로 아래와  같은 사용자 이름이 설정됩니다.

Amazon Linux AMI의 경우 사용자 이름은 ec2-userRHEL AMI의 경우 사용자 이름은 ec2-user 또는 ro…
자세한 내용 보기