*아이프렌즈펫 앱 디자인 가이드 경험을 공유합니다. 이게 처음 작업한 앱 디자인 가이드라서 미흡한 점이 많을 수도 있는데 문제가 있는 부분이 있다면 댓글로 알려주시면 반영하겠습니다 ^^ *아이폰 앱 가이드 작업의 특징 디자인 가이드 작업은 기준 해상도 하나를 정해서 그 수치값으로, 이미지 작업은 고객/개발자와 협의한 모든 해상도를 지원하는 방향으로 작업하면 됩니다. 아이폰 해상도를 먼저 보면 이미지 출처: 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에 대해서 포스팅해보려고 합니다. 현재 플랫폼사업팀은 소스코드 관리를 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 안에 존재하고있습니다. 단순한 파일이고 곧 커밋할 파일에 대한 정보를 저장합니다. 위...
AWS Command Lne Interface(이하 CLI)는 AWS 서비스를 터미널에서 명령어 기반으로 컨트롤하는 도구입니다. AWS SDK for Python (Boto)를 기반으로 되어 있으며, AWS의 모든 서비스를 관리할 수 있습니다. 리눅스는 Bash , Zsh , tsch 등의 일반적인 셸 프로그램을 사용하여 Linux, macOS, or Unix에서 명령을 실행하며, Window는 Microsoft Windows의 PowerShell 또는 Windows 명령 처리기(CMD)에서 사용할 수 있습니다. 또한 원격으로 putty 혹은 SSH등의 터미널을 이용할 수 도 있습니다. 예제 AWS S3 파일 업로드 $ aws s3 cp myvideo.mp4 s3: //mybucket/ 위와같이 aws 명령어에 s3 추가 서비스별 옵션으로 myvideo.mp4 파일을 손쉽게 S3 버킷에 업로드할 수 있습니다. AWS CLI 설치하기 for MacOS 최신 버전의 Python 및 pip를 설치한 다음, 이를 사용하여 AWS CLI를 설치할 수 있습니다. 1. Python.org 의 다운로드 페이지 에서 Python 3.6을 다운로드 및 설치합니다. 2.Python Packaging Authority에서 제공하는 스크립트를 사용하여 pip 를 설치합니다. $ curl -O https: //bootstrap.pypa.io/get-pip.py $ python3 get-pip.py --user 3.pip를 사용하여 AWS CLI를 설치합니다. $ pip3 install awscli --upgrade --user 4.AWS CLI가 올바르게 설치되었는지 확인합니다. $ aws --version AWS CLI 1.11.84 (Python 3.6.1) 구성하기 aws configure 명령을 실행하여 AWS CLI 설정할 수 있습니다. $ aws configure AWS Access Key ID [None]: AKIAIOSFODNN7EXAMPLE AWS Se...
Java8 Stream 가이드 1. 개요 Java 8의 새로운 기능 Stream에 대해 설명합니다. 2. Stream API Java 8의 주요 새로운 기능 중 하나는 여러가지 요소(element) 처리를 위한 매우 강력한 스트림 기능인 java.util.stream 입니다 . 클래스는 Stream 이며, T 타입 기반의 Stream을 다양한 방법으로 생성할 수 있습니다. 2.1. Stream 생성 stream () 및 of () 메소드를 사용하여 콜렉션 또는 배열과 같은 다른 요소 소스에서 스트림을 작성 String [ ] arr = new String [ ] { "a" , "b" , "c" } ; Stream < String > stream = Arrays . stream ( arr ) ; stream = Stream . of ( "a" , "b" , "c" ) ; stream 을 생성하는 쉬운 방법은 컬렉션 인터페이스를 통해 생성할 수 있습니다. Stream < String > stream = list . stream ( ) ; 2.2. 멀티쓰레딩 Streams stream API는 또한 스트림 요소에서 병렬 모드로 작업을 실행 하는 parallelStream() 메서드를 제공하여 멀티 스레딩을 단순화 합니다. 아래 코드 는 스트림의 모든 요소에 대해 doWork () 메소드 를 병렬 로 실행할 수 있도록 합니다 list . parallelStream ( ) . forEach ( element - > doWork ( element ) ) ; 3. Stream 사용법 스트림에서 제공하는 함수는 크게 중간 작업 (return Stream, self-return )과 연산작업 (특정 타입으로 return ) 으로 나뉩니다. long count = list . ...
안녕하세요. 명동섞어찌개입니다. SVG (Scalable Vector Graphics) 는 이름 그대로 Bitmap 이미지와 달리 확대, 축소해도 깨지지 않는 이미지 포맷이죠. 요새 아이콘을 화면에 넣을 때 많이 쓰는 방법으로 아이콘 폰트를 임베딩해서 쓰거나, svg 아이콘을 다운받아 쓰는 법 외에 SVG 아이콘을 그려서 화면에 적용하는 아주 간단한 팁을 알려드릴께요! 1. Adobe 일러스트레이터를 켭니다. 없으신 분은.. 디자이너분께 부탁드려보시거나 회사 라이센스 프로그램이 있을 경우 그걸 써보세요 (협업~) 2. 일러스트레이터에서 필요한 아이콘을 그립니다. 굳이 코딩으로 어렵게 계산해서 그리실 필요가 전혀 없습니다. 그냥 보면서 그립니다. 3. 아이콘을 선택한 후 복사합니다. (Ctrl + C) 4. 새 문서를 만든 뒤 붙여넣기 합니다. (Ctrl + V) [ icon-add-user-on.svg] 끝. 참 쉽죠?! 5. 마지막으로 CSS 에 적용합니다. 저 같은 경우는 일반적으로 이런 식으로 사용합니다. [layout.css] 1 2 3 . customIcon : before { content: '' ; position: absolute ; top: 12 px ; left: 3 px ; background - size: 20 px auto ; background - repeat: no - repeat ; width: 20 px ; height: 20 px ;} . addUser { background - image: url ( assets / icons / icon - add - user - on . svg );} [html] 1 < i class = "customIcon addUser" ></ i >
댓글
댓글 쓰기