남산 아래 개발자들

Json 형식은 데이터 교환방식중 가장 많이 사용 하지 않나 생각 합니다. android에서는 가장 기본적으로 JsonObject라는 클래스를 이용하여 편리하게 파싱을 할수 있습니다. 하지만 이방법도 더 편리한 방법으로 제공 하는 것이 바로 Gson입니다. Gson 라이브러리는 파싱할 클래스를 선언하고 간단한 함수 호출을 통하여 객체에 값들이 할당됩니다. compile 'com.google.code.gson:gson:x.x' build.gradle의 dependencies에 gson라이브러리를 추가 합니다. class SampleDTO { int idx ; String text ; public SampleDTO ( int idx , String text ) { this . idx = idx ; this . text = text ; } } 파싱할 클래스형태를 만들어 줍니다. Gson gson = new Gson ( ) ; SampleDTO dto = new SampleDTO ( 1 , " sample " ) ; String sJsonText1 = gson . toJson ( dto ) ; String sJsonText2 = gson . toJson ( dto , SampleDTO . class ) ; Log . d ( " gson " , " sJsonText1: " + sJsonText1 + " \n sJsonText2: " + sJsonText2 ) ; 생성한 객체를 통해 Json텍스트로 만들어 주는 형태입니다. Gson 객체와 Json텍스트로 만들어 줄 객체를 생성합니다. 데이터 객체를 텍스트로 만들어 주기 위한 함수 toJson을 사용합니다.

*이 문서는 지속적으로 업데이트 될 예정입니다. 앱 디자인을 처음으로 시작하면서 많은 자료를 웹에서 찾았는데요, 이미 많이들 아시겠지만 유용한 사이트를 공유하려고 합니다. Behance  [UI, BI, App, Web] https://www.behance.net/ 디자이너들 사이에 가장 유명한 포트폴리오 사이트이지요? ㅎㅎ 지인의 지인이 심플한 아이콘 디자인을 이곳에 올렸다가 애플 본사에서 연락이 와서 채용되었다는 깜짝 놀랄 소식도 들은 적 있습니다. ㅎㅎ 그만큼 디자이너들이 자신의 포트폴리오를 어필할 수 있는 공간이고 퀄리티 높은 작업물들이 아주 많구요. Adobe ID로 로그인해서 마음에 드는 포트폴리오를 저장할 수 있습니다. Dribble  [인터랙션, 모션, 컬러] https://dribbble.com/ 목록에서 보고 싶은 디자인 작업물을 선택한 뒤, 오른쪽에서 원하는 컬러를 선택하면 해당 컬러톤의 디자인 작업물을 찾아줍니다. 원하는 컬러 톤 벤치를 할 때 유용하구요. [1] 원하는 컬러 선택 [2] 선택한 컬러 톤의 디자인 보여줌 또 한가지 강점은 상단 메뉴에 Shots > AnimatedGIFs 를 누르면 인터랙션 GIF 들이 나오는데 꽤 퀄리티가 높습니다. 인터랙션을 벤치마킹할 때 유용합니다. 각종 인터랙션 GIF 그밖에 Dribble 만큼 컬러 톤 벤치하기에 유용한 사이트는 https://brandcolors.net/ 온갖 브랜드의 메인 컬러를 한눈에 보고, 간단한 클릭만으로 색상값을 저장할 수 있습니다. 또 하나는 Adobe Kuler 가 있습니다. https://color.adobe.com/ko/create/color-wheel/ 원하는 색상 조합을 만들어서 공유할 수도 있고, 타인이 올린 색상조합을 저장해서 Photoshop 에서 Color Themes 를 꺼내 사용할 수도 있는 유용한 사이트입니다. https://coo

*이 문서는 지속적으로 업데이트 될 예정입니다 앱을 디자인하고 개발이 끝났다면 앱을 출시하기 위해 추가로 준비해야 할 것들이 있는데요, 이번에 처음으로 앱을 디자인하면서 겪은 시행착오를 나누고 유용한 사이트를 공유하려고 합니다 ^ㅁ^ 앱 아이콘 아이프렌즈펫 앱 아이콘 안드로이드 / 아이폰 모두 필요로 하는 아이콘의 사이즈 수가 천차만별로 다양하고, 계속 추가되고 있는데요. 아래 사이트를 이용하시면 아이콘 사이즈를 자동적으로 맞춰줍니다. http://icon.angrymarmot.org/ Walkthroughs 아이프렌즈펫 Walkthroughs Walkthroughs 는 앱스토어에 앱을 소개하는 화면입니다. *개수 2~4장 *내용:  간단한 텍스트와 아이콘과 함께  앱의 핵심적인 기능을 잘 설명한 화면이면 충분합니다. *팁 가능하면 앱 스크린샷은 집어넣지 않는 것을 권유드립니다. 왜냐하면.. 앱 디자인 업데이트 될 때마다 사소하게 끝없이 바꿔줘야해서 ㅠ_ㅠ *사이즈 안드로이드는 1440x2560 이거 하나면 충분하구요. 애플스토어용 화면 사이즈는 찾아보면 사이즈가 엄청 많은데요, 다 필요하지는 않고 750x1334 1242x2208 이 두 가지 사이즈만 있으면 충분합니다. 750보다 작은 사이즈 스크린은(아이폰 4, 5 등) 750으로 리사이징 체크해서 등록할 수 있습니다. (아이폰 X 가 나오면 더 큰 사이즈가 필요해질수도 있겠네요) * 포맷 PNG로 저장하는데 포토샵에서 저장할때 Transparency 를 체크 해제하고 투명도 없는 PNG 로 저장해야 앱스토어에 등록할 때 에러가 나지 않습니다.

안녕하세요 남산돈가스입니다. 오늘은 지난 포스팅에 이어 Nodejs를 이용하여 Android 푸시기능을 구현해보겠습니다. 개인적으로 gcm은 apple의 apns보다는 푸시기능 구현이 더 간단하다고 생각하는데요. 그 이유는 apns 같은 경우엔 인증서 및 키 파일을 발급받는 과정이 복잡한데 비해 gcm은 개발자 콘솔에서 프로젝트를 등록하고 gcm 서비스만 활성화하면 API Key와 sender ID 값을 바로 제공해주기 때문에 이것들을 가지고 바로 push기능을 구현할 수 있기 때문입니다. API Key을 발급 받는 과정은  http://blog.saltfactory.net/node/implementing-push-notification-service-for-android-using-google-play-service.html  에 이해하기 쉽게 제공되고 있으니 참고하시기 바랍니다. 그렇다면 API Key와 SenderId값을 발급받았다는 전제 하에 본격적으로 NodeJs를 이용하여 안드로이드 푸시 기능을 구현해보겠습니다. 일단, NodeJS에서 gcm기능을 이용하기 위해선 gcm 모듈이 필요합니다. npm install node - gcm gcm 모듈을 다운받았으면 js 파일을 하나 생성합니다. var gcm = require( 'node-gcm' ); var message = new gcm.Message ({ collapseKey: 'demo' , delayWhileIdle: true , timeToLive: 3 , data: { key: 'push Test' , } }); install한 gcm 모듈을 선언하고, message라는 변수에  gcm.Message 를 초기화 합니다. 이 Message라는 메서드에 전송 될 푸시에 대한 설정 정보가 json 형식으로 들어가게 됩니다. 간단하게 Message에 대한 설정

안녕하세요 남산돈가스입니다. 지난 시간에 이어서 오늘은 #2 Node.js를 이용하여 iOS 푸시기능을 구현해보는 시간을 갖겠습니다. 일단 이 포스팅에서는 iOS용 APNS 인증서와 키가 모두 발급되어있다는 전제하에 포스팅을 진행하려고 합니다. iOS 클라이언트 단에서 APNS를 셋팅하는 부분은 아래 링크에 보기 쉽게 설명되어있으니 참고하시면 쉽게 따라오실 수 있을 것입니다. http://blog.saltfactory.net/node/implementing-push-notification-service-for-ios.html 자, 그럼 ios에 푸시를 날리기위한 준비물이 완성되었으니 이제 nodejs쪽을 확인해봅시다. 간단한, 프로젝트를 생성하겠습니다. express App으로 pushTest라는 프로젝트를 생성했습니다. nodejs에서 apns 모듈을 사용하기 위해서는 apn 모듈을 install 해야합니다. npm install apn apn 모듈을 설치한 뒤 js파일을 하나 생성합니다 // Developer mode var dev_options = { gateway : "gateway.sandbox.push.apple.com" , cert: './ios-certificates/development/swift_apns_development_cert.pem' , key: './ios-certificates/development/swift_apns_development_server.pem' , production: false }; // Production(App store) var pro_options = { gateway : "gateway.push.apple.com" , cert: './ios-certificates/development/swift_apns_production_cert.

코드(Code) 부트스트랩을 사용하여 프로그래밍 코드를 삽입하거나 코드 블럭을 생성할 수 있습니다.    코드삽입(Inline code) 코드들 삽입하기 위해서는 <code> 태그를 사용하며, HTML 꺾쇠는 이스케이프 문자를 사용해야 합니다. For example, <section> should be wrapped as inline. For example, <code> &lt; section &gt; </code> should be wrapped as inline.       코드블럭(Code blocks) 여러줄의 코드는 <pre> 를 사용해서 표시 할수 있습니다.  .pre-scrollable 클래스는 최대 높이를 350px로 지정하고 세로스크롤을 나타나게 합니다. <p>Sample text here...</p> <p>And another line of sample text here...</p> <pre><code> &lt; p &gt; Sample text here... &lt; /p &gt; &lt; p &gt; And another line of sample text here... &lt; /p &gt; </code></pre>       수식표현(Variables) 수식 표현은  <var> 태그를 사용합니다. y = m x + b <var> y </var> = <var> m </var><var> x </var> + <var> b </var>       키보드 입력표시(User input) 키보들 입력을 표시하려면 <k

오늘은 서비스 기획자에게 필요한 WireFrame Toll 중에 PowerMockup 프로그램을 소개해 드리고자 합니다. 저는 주로 카카오의 OvenApp 을 이용하여 화면설계를 진행 했습니다. 그런데 간혹 결과물을 PowerPoint 로  작성해야 하는 경우가 생기 됩니다. 검색 해보니 PowerMockup 은 PowerPoint 에 plug-in 형식으로 PPT 문서로 WireFrame을 편리하게 만들도록 도와주는 개념입니다. 아래 제품소개 동영상을 보시면 바로 이해가 되실 겁니다. 그럼 체험판을 다운로드 하여 프로그램을 사용법을 살펴보도록 하겠습니다. 1. 다운로드 사이트 접속 https://www.powermockup.com/ 2. 체험판 다운로드 메인 페이지 에서 DOWNLOAD TRIAL 을 선택하여 체험판 설치 파일을 다운로드 합니다. 3. 다운로드 프로그램 설치 간단하게 Next 버튼 클릭을 통해서 설치 진행이 가능합니다. 설치가 완료되면 Run PowerMockup 을 선택하여 파워목업을 실행 할 수 있습니다. 4. 파워목업 실행 파워 목업이 실행되면 환영인사와 함께 파워목업 사용 방법에 대한 PPT 가 실행 됩니다. 5. 파워 목업 툴 사용하기 파워목업이 설치되면 리본메뉴에 “Power Mockup” 메뉴가 추가됩니다. Power Mockup > Show Shapes Panel 을 선택하면 우측에 Power Mockup Shapes 메뉴가 생성됩니다. 제공되는 Layout 을 활용하면 Drag&Drop 을 통해 간략하게 화면 구성이 가능합니다. 체험 버전 이므로 일부 Shape는 사용이 불가능 합니다. 사용 불가능한 Shape를 사용하려고 하면 “Full Version Required”  라는 메시지가 표출되는 것을 보실수 있습니다. 6. Custom Shape 사용하기 PowerMockup 에서는 기본적으로 제공되는 Shapes 외