[앱 디자인] 디자인 가이드 작업에 유용한 툴 + 소개

이미지
*이 문서는 지속적으로 업데이트 될 예정입니다 Assistor PS http://wit-web.azurewebsites.net/ko/assistor/product 제품소개영상 GUI 디자인 일을 잠깐 배운 친구에게 추천받은 툴인데 아주 유용하지만 약간 느려서 나중에는 그냥 이걸 안쓰고 파워포인트로 디자인가이드 작업을 하게 되었다는;; (치수 기입을;;;) 그러나 작정하고 쓰면 아주 유용한 툴입니다. 사용법도 간단한데, 설치하고 나서 포토샵과 함께 켜두고 포토샵에서 수치를 알아야 하는 레이어 선택 + Assistor PS 의 버튼 선택하면 알아서 간격, 크기 등을 재서 포토샵 레이어 위에 기입해줍니다. 그걸 복사해서 디자인 가이드 문서에 붙여넣기 하면 끝! ...인데, 레이어를 처음부터 매우 정확하고 정교하게 간격이나 위치 조정을 해서 작업하지 않으면 시안 잡고 나서 가이드 작업 할때 다시 위치 조정을 일일이 해야 하는 치명적인 단점이 있습니다. 처음부터 레이어 정리를 잘하세요! ㅠㅠ (저는 그래서 레이어 정리 다시하느니 PPT 로 쓰게 되었습니다;;) 레이어 정리를 못한 채로 AssistorPS 를 사용하면 아래처럼 됩니다. 수치가 0 으로 끝나는게 거의 없죠;; 이러면 개발자들이 해상도별 좌표 계산 같은걸 할 때 문제가 많습니다. 레이어정리_못한_예.jpg 디자인가이드 작업용 툴 대세는 스케치 + 제플린 이런 것 같지만 스케치는 아직도 맥에서만 쓸 수 있다는 치명적인 단점(?)이 있고, 그 비슷한 제품으로 Adobe에서 내놓은 XD 도 맥/윈도우용으로 출시되었는데 스케치처럼 디자인가이드가 자동으로 나오거나 할 만큼 매력적인 툴은 아닌 것 같더라구요. 써 보게 되면 후기를 올리겠습니다 ^ㅁ^ *그 밖에 디자인 가이드 작업할 때 유용한 추천 링크 바이널 X 블로그 GUI 디자이너가 알아야 할 GUI 가이드라인 문서 작업의 기본 원칙  http://bit.ly/2eWsRmG GUI 디자이너가 알아야

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

이미지
*아이프렌즈펫 앱 디자인 가이드 경험을 공유합니다. 이게 처음 작업한 앱 디자인 가이드라서 미흡한 점이 많을 수도 있는데 문제가 있는 부분이 있다면 댓글로 알려주시면 반영하겠습니다 ^^ * 안드로이드 앱 디자인 가이드 작업의 특징 안드로이드의 해상도입니다 이미지 출처: http://bit.ly/2hifr90 보시다시피 어마어마하게 많습니다 ^^ 이 모든 해상도를 일일이 지원할 수가 없어요~ 그래서 몇 가지 대표적인 해상도를 지원하는 방향으로 가이드를 잡고 이미지 작업을 합니다. 아이프렌즈펫의 경우에는 저해상도, 중간 해상도, 고해상도 3개를 지원해서 720 x 1280 1080 x 1920 1440 x 2560 이 세 가지로 이미지를 오렸구요, 가이드는 720 x 1280 기준으로 작업했습니다. *좌표 안드로이드는 상대 좌표로 작업합니다. 워낙 다양한 폰 사이즈 때문에 절대 좌표로 잡기 어려워요. 그래서 가이드에 중요한 정보는 좌표보다는  간격, 크기 입니다. *색상값  #123456 헥사 컬러 코드를 주로 사용합니다. 가이드에 이 값을 표기해주세요. *이미지 작업 수치값 계산 작업을 했다면 아이콘 등등을 잘라서  PNG  로 공유합니다. 이건 당연히 해상도별로 아이콘을 오려야 하는데요... 수치값은 720 기준으로 했다 하더라도 1440 등 다른 해상도 기준으로도 아이콘을 잘라드려야 합니다. 따라서 당연히 이미지는 Vector 아이콘으로 작업하셔야합니다 ^ㅁ^ Ctrl + I 눌러서 해상도 크기 늘리시면 되구요 (디자인 경력 1개월 미만을 위한 충고 ㅋ ) 이미지 버튼의 경우 단순한 사각형, 원형 같은 버튼의 경우 코딩으로 작업이 가능하지만 특별한 모양의 버튼의 경우 이미지를 잘라드려야 하는데요, 버튼을 자를 때는 기본적으로 세 가지 상태에 대해서 만들어 주셔야 합니다. (경우에 따라 한두가지 필요없는 게 있을 수 있구요) * 나인 패치 안드로이드에서는 앱 퍼포먼스를 높이기 위해

[AWS] 부하분산과 고가용성을 위한 ELB 구성하기

이미지
이번 포스팅에서는 AWS 에서 제공하는 ELB 서비스에 대해 알아보겠습니다. ELB 란 ? AWS 에서 부하분산 및 고가용성을 위해 제공하는 서비스로  Elastic Load Balancer 의 약자 입니다. ELB 서비스 구성 EC2 인스턴스 생성 ELB 구성을 위해서 먼저 2개의 EC2 인스턴스를 생성 하도록 하겠습니다. 고가용성 구성이 목적이므로 각각의 AZ (Availability Zone)에 하나씩 인스턴스를 생성합니다. 로드밸런서 생성 Instance가 준비되면 Load Balancer 생성을 진행합니다. 좌측 메뉴에서 Load Balancers 를 선택하고  상단 Create Load Balancer 를 선택합니다. 로드 발란서 형식 선택 화면이 표출됩니다. Classic Load Balancer  의 Create를 선택합니다. Load Balancer Name 에 이름을 입력하고 Protocol 과 Port 정보를 입력합니다. Load Balancer Port 와 Instance Port 를 다르게 설정하면  EC2 인스턴스 서비스 포트를 외부에 노출하지 않고 ELB 를 통해서만 접속이 가능하도록 구성할 수 있습니다. 아래  그림과 같이 설정하게 되면 ELB 80 포트로 접속된 서비스를 Instsnce 3000 포트의 서비스로 연결합니다. 입력이 완료되면 Next 를 선택합니다. Security Group 을 설정합니다. 새로운 Security Group을 생성하여 Load Balancer Port  접속을 허용하도록 구성합니다. 입력이 완료되면 Next 를 선택합니다. HTTPS를 사용하지 않는 경우 아래와 같은 경고가 표출됩니다. HTTPS 구성 및 SSL 인증서 설정은 따로 포스팅 하도록 하겠습니다. 우선은  Next 를 선택합니다. Health Check 설정 화면이 표출됩니다. Load Balancer 에 연결된 EC2 인스턴스가 정상적으로 동

[AWS] AWSome Day - Tech 2017 참관기

이미지
안녕하세요 남산돈가스입니다. 지난 주 9월 15일에 세종대학교에서 AWSome Day - Tech 2017 교육행사가 진행되어 참석했습니다. AWSome Day 행사는 아마존웹서비스(이하 AWS)의 기술 에센셜 과정의 내용을 기반으로 컴퓨팅, 스토리지, 데이터베이스 및 네트워크 등 AWS의 핵심 서비스들에 대해 단계적으로 알아볼 수 있도록 구성되어 있는 행사라고 할 수 있는데요. AWS의 핵심 서비스들을 다루어보면서 조금은 더 AWS의 익숙해질 수 있는 자리였습니다. 오전에 세종대학교에 도착했습니다. 처음으로 와본 세종대학교였는데. 생각했던 것 보다 건물들이 세련되고 깔끔하더라구요. 함께 참석했던 분들 모두 오랜만에(?) 대학생의 마음을 가지고 등교하는 기분으로 교육장을 찾아갔던 것 같습니다.ㅎㅎ 행사장을 찾아가면서 곳곳에 AWSome Day 현수막들을 볼 수 있었습니다. 교내에서 이렇게 좋은 행사가 진행되는데 클라우드서비스의 관심이 있는 세종대학교 학생들에겐 정말 좋은 기회라고 문득 생각이 들었습니다. 행사장이 지하 2층에 있어 에스컬레이터를 타고 내려가면서 행사가 준비되고있음을 로비의 소란스러운 소리를 통해 알 수 있었습니다. 로비에는 AWS의 파트너사들인 메가존, 농심데이터시스템, 슈퍼트랙 등 다양한 부스 전시가 진행되고 있었고, 저희는 행사장 안으로 들어갔습니다. 행사장 규모는 정말 엄청났습니다. 물론 세계적인 행사인 AWS Summit보다는 작았지만 일반적인 IT행사라고는 생각할 수 없을 정도로 큰 행사장에 수많은 사람들이 있었습니다. 자리를 찾아 앉아 교육자료까지 준비해놓고 이제 강의를 들을 준비를 마쳤습니다. 기조연설을 시작으로 행사가 본격적으로 시작되었습니다. 아마존 테크니컬 트레이너 두 분이서 번갈아가며 강의를 해주셨는데, 자칫 지루해질 수 있는 강의에서 특별했던 점이 트레이너 한 분이 실제로 AWSome Day를 위한 데모 서비스를 구축해오셔서 AWS 서비스를 이용한 데모에서 행

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

이미지
*아이프렌즈펫 앱 디자인 가이드 경험을 공유합니다. 이게 처음 작업한 앱 디자인 가이드라서 미흡한 점이 많을 수도 있는데 문제가 있는 부분이 있다면 댓글로 알려주시면 반영하겠습니다 ^^ *아이폰 앱 가이드 작업의 특징 디자인 가이드 작업은 기준 해상도 하나를 정해서 그 수치값으로, 이미지 작업은 고객/개발자와 협의한 모든 해상도를 지원하는 방향으로 작업하면 됩니다. 아이폰 해상도를 먼저 보면 이미지 출처: http://protosketch.io/exporting-assets-for-ios-ipads-and-iphones/ 위에 point 가 실제 폰에서의 크기라면 render at 사이즈는 디자이너가 포토샵에서 작업해야 할 픽셀 단위 사이즈라고 보시면 됩니다. 아이프렌즈펫은 일단 기준 해상도를 iPhone6 으로 잡고 가기로 했습니다. 그래서 포토샵에서 작업할때는 750 x 1334 사이즈로 작업해서 해당 작업물로 좌표값, 크기 등을 계산해서 개발자님께 넘겼구요 만약 iPhone5 를 기준 해상도로 잡았다면 640 x 1136 을 기준으로 포토샵 화면 작업을 해서 넘기시면 됩니다. 그러면 개발자는 디자이너가 계산해 넘긴 수치값의 1/2 을 곱하거나 1.5 배 하는 등 계산을 해서 작업을 하게 됩니다. XCode 에서의 작업 화면 만약 750 기준으로 작업을 해서 드리면 1/2 값을 저기에 입력하는 식으로 작업합니다 여기서 알 수 있는 사실은, 포토샵에서 드리는 수치가 최종값이 아니기 때문에 가급적 모든 수치가 짝수가 되고 , 맞아 떨어지는게 좋습니다. 그래야 개발자가 나누고 곱해도 소수점이 나오지 않기 때문이죠. 그래서 아이프렌즈펫 작업을 할때는 한 이미지로 여러 해상도를 지원해야 하기 때문에 가급적 6의 배수 로 크기를 계산한 작업물을 드렸습니다. *좌표 절대적인 건 아니고.. 대략 저런 기준으로 잡아서 작업하시면 됩니다 ^^ 아이폰은 절대 좌표 로 작업합니다. 그러니까 상단 Status

[정보] Git을 이용한 형상관리 #2 - Git 저장소, 생성, 수정, 커밋

이미지
안녕하세요 남산돈가스입니다. 지난 시간에 이어 Git를 이용한 형상관리 포스팅을 이어서 진행하겠습니다. 1. Git 저장소 만들기 Git 저장소를 만든느 방법은 두 가지가 있습니다. 첫번째로는 기존 프로젝트를 Git저장소로 만드는 방법이 있고, 두번째는 다른 서버 저장소에 있는 Git을 Clone하는 방법이 있습니다. 1) 기존 디렉토리를 Git저장소로 만들기 기존 프로젝트를 Git으로 관리하고 싶을 때, 해당 프로젝트의 경로로 이동합니다. $ git init git init 명령어를 실행하면 해당 프로젝트 경로에 .git 이라는 디렉토리가 생성됩니다. 이 .git 디렉토리는 저장소에 필요한 뼈대 파일이 들어있습니다. 이 명령만으로는 아직 프로젝트의 어떤 파일도 관리하지 않은 상태입니다. Git이 파일을 관리하게 하려면 저장소에 파일을 추가하고 커밋을 해야합니다. $ git add ./* $ git commit -m 'my first commit!!' 해당 디렉토리 하위의 있는 모든 파일을 Git 저장소에 add한 뒤 commit 명령어를 이용해 저장소에 추가한 파일을 commit 하였습니다. 2) 기존 저장소를 Clone 하기 Git 저장소를 복사하고 싶을 땐 git clone 명령을 사용합니다. $ git clone [url] url 안에 복사할 저장소의 url를 입력하면 됩니다. 지원하는 프로토콜은 https, git, ssh 등이 있습니다. 2. 수정하고 저장소에 저장하기 git init이나 clone을 이용하여 저장소를 생성해보았습니다. 이제 실제 파일을 수정하고 파일의 스냅샷을 커밋해보겠습니다.  워킹 디렉토리의 모든 파일은 크게 Tracked(관리대상인) 파일과 Untracked(아닌) 파일로 나뉜다. Tracked파일은 이미 스냅샷에 포함되어 있던 파일을 말합니다. 또 Tracked파일은 Unmodified(수정되지 않은) 와 Modified(수정 된) , 그리고 St

[정보] Git을 이용한 형상관리 #1 - Git의 세가지 상태, Git 설치

이미지
안녕하세요 남산돈가스 입니다. 오늘은 Git에 대해서 포스팅해보려고 합니다. 현재 플랫폼사업팀은 소스코드 관리를 svn을 이용하고 있습니다. 하지만 개발하며 braches를 trunk로 올리는 과정에서 잦은  conflict들을 경험하였고 Git을 이용하면 소스관리가 조금 더 편해질까라는 의문을 가지게 되었고 함께 공부해볼 겸 Git에 대해 포스팅하기로 하였습니다. 이 포스팅은 방대한 Git의 내용을 모두 다루기보다는 실제 개발에 가장 빈번하게 사용되는 기능을 위주로 작성할 예정입니다. 1. Git의 세가지 상태 Git은 파일을 Committed, Modified, Staged 이렇게 세 가지 상태로 관리합니다. 먼저 Committed란 데이터가 로컬 데이터베이스에 안전하게 저장되었다는 것을 의미합니다. Modified는 수정한 파일을 아직 로컬 데이터베이스에 커밋하지 않은 것을 말합니다. 마지막으로 Staged는 현재 수정한 파일을 곧 커밋할 것이라고 표시한 상태를 의미합니다.  이 세 가지 상태는 Git 프로젝트의 세 가지 단계(Git Directory, Woking Directory, Staging Area)와 연결되어 있습니다.  Git Directory는 Git이 프로젝트의 메타데이터와 객체 데이터베이스를 저장하는 곳을 말합니다. 이 Git Directory가 Git의 핵심이라고 할 수 있습니다. 다른 컴퓨터에 있는 저장소를 Clone할 때 이 Git Directory가 만들어집니다.  Working Directory는 프로젝트의 특정 버전을 CheckOut 한 것을 말합니다. Git Directory는 지금 작업하는 디스크에 있고 그 디렉토리 안에 압축된 데이터베이스에서 파일을 가져와서 Working Directory를 만들게 됩니다.  Staging Area는 Git Directory 안에 존재하고있습니다. 단순한 파일이고 곧 커밋할 파일에 대한 정보를 저장합니다. 위의 설명을 종합해보자면 Git은 다음과 같은