Guided Tour of Corona’s API Reference

Posted on June 19, 2012. Written by Jonathan Beebe

이번주의 튜토리얼은 약간 다른겁니다. 코로나의 다른 기능들에 대해 다루기 보다는 어느 특정 기능보다도 더 중요하다고 할 수 있는 전체 코로나 개발에 대한 측면에서 바라볼 겁니다. 여러분이 오늘 배우실 것은 여러분이 코로나 프로젝트를 진행하면 반드시 사용하셔야 하는 분야 입니다. 바로 Corona SDK API Reference 이죠

Corona API Reference는 코로나의 특정 기능을 어떻게 사용하느냐에 대해서 배울 수 있는 문서 입니다. 특정 이벤트나 객체 타입에 대한 정보도 얻을 수 있고 항상 사용하셔야 할 자원입니다. 그러므로 이에 대한 튜토리얼을 소개하는 것은 당연하게 필요한 것이겠죠.

만약 여러분이 아직까지 API Reference를 충분히 활용하지 못하고 계신다면 처음에는 너무 많은 정보와 배울것들이 있다고 느낄겁니다. 오늘 제가 전반적인 내용을 훑어서 알려드리겠습니다. 그리고 이 Corona API reference가 더 좋아질 수 있도록 여러분이 도움을 주실 수 있는 방법도 알려드리겠습니다.

Interface Overview

Navigation and Sidebar

위쪽 sidebar에 있는 navigation bar는 보시면 아실 겁니다. 코로나의 전체 documentation을 크게 3부분으로 나눠서 각 section으로 갈 수 있도록 만들었습니다.

왼쪽은 각 세부 섹션들에 직접 갈 수 있는 링크들이 있습니다.  Jump to... 드롭 다운 메뉴도 이 좌측 링크들과 비슷한 역할을 합니다. 하지만 좌측 메뉴는 그 세부 섹션 페이지로 가는데 반해 이 드롭다운 메뉴는 현재 페이지 내에서 해당 항목으로 가는 겁니다. (페이지가 바뀌지는 않습니다.)

이 API Reference page는 코로나의 모든 함수, 이벤트, 프로퍼티, object methods 그리고 data type 들에 대한 리스트가 있는 index 입니다. 여러분이 무엇을 찾는지 확실하게 아신다면 ctrl+F 를 누르셔서 검색하는 게 가장 빠른 방법입니다. 또 다른 유용한 기능은 아래쪽에 있는 바로 breadcrumbs 라고 합니다. 이 하단의 바는 항상 있는데요. 여러분이 지금 어디에 있는지 알려주는 역할을 합니다.

API Reference Columns

API Reference index (home) page에 보면 3가지 주제로 나뉘어져 있는 걸 보실 겁니다. -Libraries, Events, Types -

Libraries  컬럼은 Corona에 내장된 함수의 리스트 입니다. (display.newImageRect()나  storyboard.gotoScene() 같은). Events 리스트는 다양한 이벤트의 종류를 열거했습니다. 그리고 각 이벤트들에 대한 연관된 프로퍼티들도 있구요.Types 는 코로나의 여러 데이터 타입들을 포함하고 있습니다. 그리고 Library 함수들에 의해 생성된 객체들하구요 그와 관련된 프로퍼티와 메소드들(특정 객체 타입에 attached 된 함수들)이 있습니다.

Reference Pages

각각의 API reference 페이지들은 특정 함수와 프로퍼티 등에 대해 여러분들이 알아야할 모든 정보가 있습니다. 만약 여러분이 이 library 함수에 대한 아무 페이지나 보시게 되면 -예를 들어 display.captureScreen() 같은 - 아래 이미지와 같은 내용을 보실 겁니다. 보시면 아시겠지만 이전의 API reference 보다 더 많은 정보들이 있습니다.

딱 보면 어떤 종류의 객체(혹은 데이터 타입)를 이 함수가 return 하는지 Revision (Build)이 뭔지, parent library 는 뭔지 그리고 관련된 키워드는 무엇이 있는지 그리고 연관된 링크(다른 API나 튜토리얼, 외부 웹페이지 등) 등을 보실 수 있습니다. 다른 타입의 API 페이지는 윗 부분에 다른 내용들이 있을 겁니다. 그건 그 타입에 걸맞는 내용들입니다.

좀 더 아래쪽에는 overview가 있습니다. 여기에는 일반적으로 조심해야 될 부분이나 헛갈리는 부분에 대한 설명이나 syntax structure, 관련된 함수 파라미터들 그리고 예제들이 있습니다.

Searching the Documentation

만약 여러분이 특정 API 페이지를 찾으셔야 한다면 home/index 페이지로 가세요. 그리고 브라우저에서 page search 를 하시던가 좌측 메뉴 링크를 이용하시던가 Jump To 드롭다운 메뉴를 이용하세요. 그런데 그 API의 정확한 이름을 모르신다면 전체 Corona Docs에서 키워드를 사용해 검색을 하실 수 있습니다. (구글에서 검색하시는 것처럼요). 검색 필드는 오른쪽 위에 있습니다. (아래 이미지를 참조하세요.)

검색 결과는 구글이 코로나 내의 블러그나 API reference page 들에서 검색한 내용입니다. images를 타입하시고 엔터키를 쳐 보세요. 그 정확도에 놀라실 겁니다.

Help Improve the API Reference

새로운 API reference는 이전 API reference 보다 많이 개선 되었습니다. 하지만 완벽한것은 아니라는 것을 저희들은 압니다. 우리가 중요한 것을 간과하거나 잊어버리고 만들었을 수도 있습니다.  (그것이 이전 API reference에 있었을 수도 있고 없었을 수도 있구요.)  어딘가 오탈자가 있을 수도있구요. 예제가 있어야 되는데 빠져 있을 수도 있구요.

코로나 API Reference 웹사이트는 계속 보완을 해 나갈 겁니다. 그리고 저희 스스로도 계속 보완할 내용을 찾는 작업을 할테고 여러분의 feedback 도 계속 받겠습니다. 특정 API 페이지에서 어떤 잘못 된 것을 발견하시거나 빠진것을 발견하시면 저희에게 알려 주세요. 그 방법은 아주 간단합니다. 각 API Reference Page의 아래쪽에 3개의 링크를 보실 수 있을 겁니다. 관련된 링크를 누르고 그 내용을 넣어 주시면 됩니다.

그러니까 API 에 관련해서 잘못 된 부분을 알려주시려면 이 블로그 글의 댓글을 달기 보다는 해당 API 페이지에 가셔서 밑에 있는 링크를 누르고 알려 주시면 감사하겠습니다. 그 링크를 누르시면 몇개의 checkbox들이 있을 겁니다. 그리고 comment 필드도 있구요. 관련 사항에 체크하시고 가급적이면 자세하게 코멘트를 달아 주세요.

Still confused?

만약 API Reference 페이지가 아직 헛갈리시면 그리고 어디서부터 시작해야 할 지 모르시면 우선 보실 필요가 있는 곳이 Guides 섹션 입니다. 여기에는 초보자 분들을 위한 Corona SDK Quick-Start 가 있습니다.

Applying Basic Animation with Transitions

Posted on June 12, 2012. Written by Jonathan Beebe

Corona SDK는 Spritesheet API 를 통해 진보된 animation 효과를 제공하고 있습니다.   하지만 그 외에도 display objects에 대해 기본적인 애니메이션 효과를 제공하도록 하는 기능들도 유용하게 사용 하실 수 있습니다. 객체를 계속 회전시킨다던지 투명도를 주었다 뺐다 하던지 한 곳에서 다른 곳으로 이동을 시킨다던가 아니면 위 세가지를 모두 합쳐서 어떤 효과를 낸다던가 하는 일을 코로나의 transition library 를 통해서 구현하실 수 있습니다.

여러분이 코로나를 이용해 게임등의 앱을 개발하면서 충분한 시간을 투자할 수 없는 상황이라면 아마도 이 함수를 사용하실 겁니다. 이 함수는 아주 많이 유용하거든요. 여러분도 아시게 되겠지만 이 함수는 사용하기에 아주 많이 쉽기도 하거든요.

Fading an Object

아래 예제를 보세요. 우리는 이렇게 객체가 사라지는 시간을 3초로 정할겁니다. (3000 milliseconds)

NOTE: 저 객체의 transition이 첫번째 argument에서 onComplete 리스너 함수까지 어떻게 진행되는지 그리고 구현하는것이 얼마나 쉬운지 보세요. 이것을 활용해서 여러 transition들에 대해 이 한가지의 listener를 만들어서 사용하실 수 있습니다. 또는 저 객체가 out of scope 일 때도 그 리스너를 사용하셔도 됩니다.

Moving Objects

transition.to() 함수의 아주 유용한 부분중의 하나는 한번에 tweening 하는데 한가지만의 프로퍼티만 사용하라는 법이 없다는 겁니다. 우리 첫번째 예제를 조금 바꿔서 그 객체를 좌상단에서 우 하단으로 움직이면서 투명해지도록 해 보죠.

Easing Library

코로나의 Easing Library 는 transition.to() 함수와 함께 쓰여서 transition 프로퍼티를 통해 transition의 behavior 를 하는데 다루는 데 사용되어 질 수 있습니다. 디폴트로 이 transition 프로퍼티는 easing.linear로 세팅돼 있습니다. 이것은 transition이 처음부터 끝까지 같은 공간에서 꾸준히 tween 되는 상태를 말합니다.

각 transition 프로퍼티 behaves를 설명하는 것은 약간 어렵습니다. 백문이 불여일견이라고 샘플 앱에서 Transition1과 Transition2 예제를 보실것을 권장합니다. 이 샘플은 아래 경로에 있습니다.

• /SampleCode/Graphics/Transition1
• /SampleCode/Graphics/Transition2

이 샘플 예제를 보시고 다른 transition type들을 적용하면서 실행해 보세요. 이렇게 하는게 가장 쉽고 확실하게 배우는 길입니다. 그리고 여러분이 배운 Corona의 transition library에 대한 모든 것을 확실히 다져 주세요.

Canceling Transitions

In the event you need to stop a transition mid-way through, you can do so by using the transition.cancel() function. However, this function requires that you store a reference to an id of the specific transition you need to cancel.

여러분이 transition이 일어나는 중간에 이를 stop 시킬 필요가 있다면 여러분은 그렇게 하실 수 있습니다. transition.cancel() 함수를 사용하시면 됩니다. 이걸 이용하시려면 해당 transition의 id를 사용하셔야 합니다.

그러니까 이 transition을 cancel 하기 이전에 그 transition의 id를 variable에 store 할 필요가 있습니다. 아래 첫번째 예제를 약간 바꾼 샘플이 있습니다. 해당 transition 아이디를 transition_id 라는 변수에 대입을 했습니다.

위에서도 언급했는데요. 우선 transition을 cancel 하기 이전에 그 transition이 존재해 있어야 합니다. 여러분이 실전에서 코딩을 하실 때는 반드시 해당 transition이 선언돼 있는지 확인하시기 바랍니다.

그리고 여러분이 transition.cancel()을 call 할 때는 그 transition id를 저장하기 위해 사용한 변수를 nil-out 시키시기 바랍니다. 그렇게 하지 않으면 skeleton table이 남겨져 있게 됩니다. (마찬가지로 object:removeSelf() 한 이후에도 반드시 그 변수를 nil-out 시켜 주세요.)

WARNING: Do not remove currently transitioning objects!

만약 현재 tweened 되고 있는 객체가 remove 된다면 여러분의 앱은 crash를 일으킬 겁니다. 이것은 scene change 할 때 종종 일어나는 현상인데요. scene change를 하기 전에 transition.cancel()을 현재 active 상태에 있을 법한 변수에 적용하는 것이 에러가 일어날 가능성을 미리 방지하는 방법일 겁니다. 이 부분은 exitScene 이벤트 리스너에서 수행하는것이 가장 이상적입니다. 좀 더 자세한 사항은 Storyboard Scene Events Explained를 확인하세요.

Corona의 transition library에 대한 좀 더 많은 정보는 Transitions API reference 페이지를 참조하세요. 좀 더 많은 정보들이 있습니다.

코로나가 새출발 하는 기분으로 이름을 Corona labs로 바꾸었습니다.

지난주에 Ambassador 들에게는 미리 메일이 왔었는데요.

며칠 지나지 않아서 공식 발표하고 새로운 싸이트도 선 보였네요.

이번에 Corona Labs로 회사 이름이 바뀌면서 CEO 월터가 올린 글을 소개합니다.

Introducing Corona Labs!
Posted on June 14, 2012. Written by Walter

Team Corona,

오늘부터 우리는 우리를  Corona Labs라고 부르기로 했습니다. 여러분들 중에 미리 알고 계신분들도 계시겠지만 모르시는 분들을 위해서 몇가지 질문들에 대한 답변을 드리겠습니다.

왜 Corona Labs죠?

글쎄요. Corona는 당연하겠죠? 그런데 왜 Labs 가 들어갈까?

작년 12월에 말했듯이 코로나는 그냥 단순한 목적에서 만들어지지 않았습니다. 실제 사람들의 삶을 바꾸기 위해 만들어 졌습니다. 그 기준으로 우리가 목표로 삼을 수 있는 곳이 어딜까요? 벨 연구소 입니다.

유닉스와 C 가 어디에서 나왔을까요. 태양광 모듈을 어디에서 나왔을까요? 디지털 카메라에 있는 CCD는 어디서 나왔을 까요. 이것 말고도 더 많이 있습니다. 이 기술들에 대한 핵심 기술과 기반 혁신은 벨 연구소에서 나왔습니다.

그들은 말 그대로 현대의 컴퓨터 세계를 만들어 냈습니다. 우리는 과학계에 그런 근본적이고 결정적인 영향을 주고 싶습니다. 그래서 "Corona Labs" 입니다.

이제 coronalabs.com 으로 접속하셔도 됩니다.

왜 이름을 바꿀 생각을 했을까요?

우리는 Corona 가 앱 개발자들에게 그냥 가족처럼 친숙한 이름이 됐으면 합니다. 지금까지 우리는 회사이름으로 Ansca 그리고 제품 이름으로 Corona를 사용했었는데요. 이게 내외적으로 좀 혼란스러웠거든요.

지난 몇년간 우리는 대부분의 사람들이 우리를 Corona를 만든 사람들로 생각하는 것을 관찰해 왔습니다. 그들은 Ansca라는 존재에 대해서도 몰랐습니다. 그 예로 고객들이 그들의 신용카드 영수증에 Ansca라는 이름이 찍혀있는걸 보고 이게 Corona 제품을 산 것에 대한 영수증이라는 것을 많은 사람들이 알아차리지 못했거든요.

사람으로 치면 회사가 진짜 이름하고 별명 두개를 갖고 있었던 거죠. 모두들 우리의 별명을 부르고 있었고 별명으로 기억하고 있었습니다. 그리고 모든 사람들이 그 별명을 좋아했습니다. 그래서 우리는 공식적으로 우리의 별명을 이름으로 사용하자고 결정했죠.

바뀐 이름에 어떤 큰 의미가 있을까요?

큰 의미가 있다면 Corona Labs는 평범한 lab이 아니라는 겁니다. 예전에는 labs (연구소)는 일종의 동굴 같았습니다. 외따로 떨어져있었고 밀폐된 환경이었습니다.

우리가 생각하는 Corona Labs는 근본적으로 다릅니다. 우리는 가장 개방적인 연구소로 만들 생각입니다. 다른 연구소들이 비밀을 간직할 때 우리는 좀 더 투명해 지려고 노력할 겁니다. 그 일환으로 여러분들은 지금까지의 site에서 우리늬 bug들을 보실 수 있었던 겁니다. 그리고 왜 우리들은 우리들의 roadmap에 대해 여러분들의 feedback을 받을까요. 바로 더 투명해 지려는 노력중 하나입니다.

그리고 마지막으로 코로나 팀들의 노고가 거기에 있었습니다. 여기 Corona Labs의 인간들은 정말 비범하게 헌신적입니다. 그러나 팀이란 그 인간들만을 말하는 것은 아닙니다. 그 팀에는 여러분 모두도 해당됩니다. 우리의 정말 대단한 Corona community 가 우리 한 팀입니다.

여러분들이 우리에게 영감을 주었고 우리의 삶을 바꾸어 놓았습니다. 우리는 Corona Labs가 다음세대에도 계속 왕성하게 활동함으로서 그에 대한 화답을 하기를 바랍니다.

추신: 페이스북 주소 facebook.com/coronalabs 를 기억해 주시고 @coronalabs 로 트위터도 follow 해 주세요. 그리고 우리들의 celebration promotion에 대해 주목해 주세요.

FAQ Wednesday #7

Posted by Tom Newman

수요일이 왔습니다. 다시 FAQ 시간이 됐네요. 아래 5개의 FAQ 가 있습니다.

Question 1

왜 시뮬레이터하고 디바이스하고 텍스트 spacing/positioning이 약간 다른가요?

Answer

시뮬레이터와 디바이스는 서로 폰트들이 다릅니다. native.systemFont는 OS에 따라 다르게 됩니다. 맥에서는 LucidaGrande 24 pt이고 iOS에서는 Helvetica 입니다. 그리고 윈도우즈는 또 다릅니다. 다른 폰트는 사이즈가 같더라도 약간 다른 공간을 차지합니다. 그래서 alignment에 다른점들이 있게 됩니다.

같은 폰트라도 OS가 랜드링을 하면서 다를 수가 있습니다.  맥OS와 iOS는 비슷한 code paths를 사용하지만 기본 text drawing은 약간 다릅니다. 같은 폰트라도 약간 다르게 glyph를 랜더링 할 수가 있습니다. 그것은 저희쪽에서 어떻게 할 수 있는 문제가 아닙니다.

이렇게 서로 다르게 나타나는 것을 방지하려면 bitmap fonts를 사용하는 수밖에 없습니다.

Question 2

display.newText로 text를 aligning 하는데 문제가 있습니다. 제대로 잘 하려면 어떻게 해야죠?

Answer

display.newText는 x,y 파라미터를 top, left를 위치시키는데 사용하게 됩니다. 여러분이 객체를 생성하고 난 후  x,y를 세팅하면 디폴트로 text의 중앙을 세팅하게 됩니다. object가 생성될 때와 같은 alignment를 사용하려면 bject:setReferencePoint( display.TopLeftReferencePoint )를 사용하실 수 있습니다. (좀 헛갈리죠? 그래서 이런 factory methods로 x,y 파라미터의 alignment를 컨트롤 할 수 있도록 준비하고 있으니 조만간 나오는 Daily Build 에서 반영 될 겁니다.)

그리고 display.newText가 call 되는 방법에 따라 width(w)와 height(h)를 어떻게 계산하는지도 이해하는게 헛갈리기도 합니다.

    w,h 가 제공되지 않으면 display.newText는 한줄짜리 객체를 생성하고 제공된 string에 맞게 대략적으로 사이즈도 생성됩니다. 이 w,h에 따라 x,y 포지션이 결정됩니다.
    w,h 가 정해져 있으면 display.newText는 제공된 width/height 를 사용해 포지션을 계산합니다. 그렇게 해서 x,y가 top left 가 됩니다. (만약 h가 0dlaus height는 해당 string에 따라 달라집니다.)

그러니까 생성하고 난 후 x,y를 세팅할 때 (예. txt.x = xAlign) 여러분은 디폴트로 object의 center를 세팅하게 됩니다. 그래서 두개의 text 객체가 같은 string 이지만 다른 width를 가질 수 있습니다. 그렇게 되니까 center로 세팅하면 좌측 정열이 되지 않는겁니다.

Question 3

여러 API를 사용해 baseDirectory를 봤는데요. 왜 이건 subdirectory를 지원하지 않죠?

Answer

display.newImage와 다른 API들이 사용하는 baseDirectory 파리미터는 시뮬레이터나 디바이스에서 사전에 지정된 시스템 디렉토리를 명시하기 위한 optional parameter 입니다. 이 파일 시스템은 sandboxed 입니다. 그래서 baseDirectory는 다음과 같은 것들 중 하나 입니다.:system.ResourceDirectory, system.TemporaryDirectory, system.DocumentsDirectory. 만약 아무런 baseDirectory가 명시돼 있지 않으면 디폴트로 system.ResourceDirectory가 됩니다.

만약 subdirectory를 참조할 필요가 있으면 그 디렉토리는 file name에 추가 되야 합니다. baseDirectory 파라미터에 추가 되지 않습니다. 아래에 Resource directory와 Document directory안에 myImages 라는 서브디렉토리의 이미지에 접근하기 위한 몇개의 샘플코드가 있습니다.

local image1 = display.newImage(  "myImages/redBall.png", 10, 200 )

-- This next line is the same as the previous
local image2 = display.newImage( "myImages/redBall.png", system.ResourceDirectory, 10, 200 )

local image3 = display.newImage( "myImages/redBall.png", system.DocumentsDirectory, 10, 200 )

Note: Documents directory는 이미지나 파일들을 저장하는데 사용될 수 있습니다. 이 때 어플리케이션은 반드시 먼저 그 디렉토리에 파일을 create/copy 해야 합니다.

여러분은 system.pathForFile인 디렉토리를 명시하거나 subdirectory의 path를 명시하는데 사용될거라고 생각할 수 있습니다. 하지만 baseDirectory가 필요한 곳에서는 제대로 작동하지 않을 겁니다.

Question 4

. 와 / 를 사용해서 subdirectory들에 접근하는게 잘 혼동되요.

Answer

간단하게 답변을 드리면 . 는 require API로 로드된 서브 디렉토리안의 모듈에 접근하는데 사용되고 / 는 다른 모든 API들에 사용됩니다. (이전 질문 답에서 보여드렸던 display.newImage 같은 겁니다.) storyboard.gotoScene도 require를 사용하므로 . 가 서브디렉토리의 scene 모듈에 접근하는데 사용되는 겁니다.

만약 movieclip.lua 모듈과 Image가 assetes 서브디렉토리에 있다면 어떻게 접근해야 하는지 아래에 예제가 있습니다.

local movieclip = require( "assets.movieclip" )
local image1 = display.newImage( "assets/redBall.png", 10, 200 )

Question 5

File I/O API에서 baseDirectory를 찾아 볼 수가 없어요. 어떻게 이 디렉토리를 명시하죠?

Answer

io.open API는 파일을 읽고 쓰기 위해 open을 사용합니다. 여기서 디렉토리와 파일 이름이 포함된 스트링인 path를 명시하죠. 이 스트링은 system.pathForFile로 생성됩니다. 아래에 File I/O를 사용해서 어떻게 디렉토리를 명시하는지 보여드립니다.

local path = system.pathForFile( "data.txt", system.DocumentsDirectory )

-- Open a file path
local fh, reason = io.open( path, "r" )

if fh then
    -- Read all the contents of the file into a string
    local contents = fh:read( "*a" )
    print( "Contents of " .. path .. "\n" .. contents )
else
    print( "Reason open failed: " .. reason )
end

만약 서브디렉토리 안의 파일에 접근하실 필요가 있다면 파일 이름에 서브디렉토리를 append 하시면 됩니다. 아래 예제는 Resource directory에서 서브디렉토리로 접근하기 위해 path를 사용하는 방법을 보여 드립니다.

local path = system.pathForFile( "myFiles/data.txt", system.ResourceDirectory )

오늘은 여기까지 입니다. 즐거우셨기를 바라구요. 새로운거 몇가지를 배울 수 있는 기회가 됐다면 좋겠네요.

요즘 브라우저 크기를 줄이면 화면 레이아웃이 갑자기 바뀌는 웹사이트를 가끔 봅니다.

Responsive WEB 개념을 이용해서 만든건데요.

요즘 웹페이지를 표시하는 디바이스들이 많이 늘어나다 보니까 하나의 웹페이지를 데스크 탑, 모바일 폰, 타블렛 PC 등 다른 해상도의 디바이스들에 맞는 레이아웃을 각각 만들 필요가 있어 졌습니다.

이 Responsive WEB은 HTML5이 Media Queries 를 이용하여 하나의 소스로 제작된 컨텐츠로 여러 해상도의 화면을 제공할 수 있도록 만드는 개념입니다.

대표적으로 Boston Globe 가 있는데요.

1. A flexible, grid-based layout : 그리드를 상대적(% 단위 등)으로 지정하여 브라우저 크기에 따라 유동적으로 변환
2. Flexible width media: images, video : 너비가 변경되어도 웹페이지 안의 미디어가 넘치지 않게 하는 기법
3. Media queries : 다양한 브라우저에서 표현양식을 제어할 수 있게 고안된 기능

Responsive WEB에는 이 세가지 개념이 기본적으로 깔려 있습니다.

그런데 이 반응형 웹은 IE8 미만에서는 사용할 수 없다고 합니다.

오늘 제 immediate manager 인 Rajesh 가 Boston Globe를 보여주면서 이거 어떻게 하는지 아냐고 물어보더라구요.

예전에 이 Responsive WEB 소스코드로 한번 연습한 적이 있어서 대충 알려 줬는데요.

많이 까먹어서 제대로 알려주지 못한 것 같네요.

생각난 김에 다시 소스로 정리를 해 두려고 합니다.

이게 제일 간단한 소스인데요.

우선 보시면 HTML5를 지정했구요. Charset 을 utf-8으로 하는 메타태그가 하나 있습니다.

그리고 뷰포트 메타태그가 있습니다. width=device-width 로 해서 화면을 사용자 디바이스 width 에 맞춰서 display 되도록 한 겁니다.

이 viewport 관련해서도 별도의 글에서 정리해 둬야겠네요.

그리고 그 다음이 css 파일인데요.

799픽셀 이하짜리와 800픽셀 이상짜리 두개를 따로 마련했습니다.

그리고 태그 안에 media query 가 있습니다. 이 부분에서 해상도에 맞게 css 파일을 불러 오는 겁니다.

그 다음에는 두개의 div 가 있는데 하나는 id가 pc_view 이고 다른 하나는 mobile_view 입니다.

이 id를 가지고 css에서는 어떻게 사용하는지 보죠.

우선 desktop_pc.css 파일 입니다.

보시면 여기서는 mobile_view 의 display 를 none으로 했죠?

그러면 pc_view 만 나오게 됩니다.

그럼 mobile.css를 보실까요?

역시 pc_view 의 display를 none으로 했습니다.

개념만 이해하기 위해 아주 간단한 예제를 살펴 봤습니다.

모바일 웹을 개발하다 보면 각 디바이스 별로 기능을 다르게 주는 경우가 있습니다.

아이폰 인경우는 어떤 기능을 실행하고 또 안드로이드인 경우는 다른 기능을 실행하고 등등이요.

그런데 전화기를 다 가지고 있지 못하면 이 기능을 제대로 테스트하지 못하기도 합니다.

이럴 경우 user agent 를 바꿔서 데스크탑이나 랩탑에서도 모바일 디바이스에서 해야만 하는 테스트를 할 수가 있습니다.

각 브라우저에 맞는 User Agent Switcher 플러그인을 설치하시면 되는데요.

우선 크롬부터 알아 보겠습니다.

1. 크롬 user agent switer

https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg

 우선 크롬 브라우저를 실행시킨 후에 위 링크로 접속을 합니다.

다음에 오른쪽 위에 있는 Added to chrome 버튼을 클릭하시면 됩니다.

간단하죠?

그러면 오른쪽 위에 저런 아이콘이 생기는데요. 이 아이콘을 누르고 원하는 디바이스를 선택하시면 됩니다.

그럼 위와 같이 제 랩탑에 있는 크롬 브라우저인데 Platform 이 iphone으로 잡히고 User Agent에도 iPhone으로 잡힙니다.

2. 파이어폭스 user agent switer

http://chrispederick.com/work/user-agent-switcher/

파이어폭스에서도 마찬가지로 이 링크로 가셔서 설치하시면 됩니다.

그리고 메뉴에서 tools - Default User Agent를 선택하셔서 사용하세요.

그러면 아까와 마찬가지로 랩탑에 있는 파이어폭스 브라우저인데도 아이폰으로 인식합니다.

그리고 또 다른 파이어폭스용 User Agent Switcher 인것 같은데요.

https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/

여기로 가셔서 받으셔도 됩니다.
저는 저 위에걸로 깔아서 쓰고 있습니다.

모바일 웹 개발하시는데 도움이 되시길 바랍니다.