개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
페이지가 시작할 때 CSS 클래스를 ui-grid-b에서 ui-grid-c로 바꾸도록 해 새로운 컬럼을 가지고 있는 테이블이 되도록 했습니다. 그 다음에 after
() method 를 사용해서 insert
identifier 에 의해 위치를 정해준 다음 해당 element를 insert 하게 됩니다.
서버에서 return 되는 <a>
links 들이 버튼으로 변경될 겁니다. 이 때 사용하는 메소드는 button
() method 입니다. 이 버튼들은 controlgroup
() method 로 묶은 후 border 로 둘러싸여질 겁니다. 위에 있는 ui-btn
class 에 의해서 버튼들은 같은 width 를 가지게 됩니다.
jQuery Mobile table ui-grid-a,
..., ui-grid-d,
and u-block-a,
..., ui-block-e 같이 specialized 된 CSS classes 들을 가지고 있는 <div>
elements를 사용합니다. 이런 CSS 클래스들은 jQuery Mobile convention에 맞게 테이블을 스타일화 하는 역할을 합니다. 이전 글의 테이블을 firefox 의 firebug로 보면 아래와 같은 HTML code를 보실 수 있습니다.
아직 jQuery Mobile 에 의해서 modify 되지는 않은 상황입니다.
A table of buttons
테이블에 버튼을 추가해 보겠습니다. data-role="controlgroup" 와 data-type="horizontal"
attributes 들을 병행해서 사용하시면 됩니다.
Two
buttons side by side in the two cells of a table
jQuery Mobile 에 의해 생성된 HTML 코드 입니다. firefox의 firebug로 본 화면입니다.
data-role="controlgroup" 이 있는 <div> 를 보시면 jQuery Mobile 에 의해 ui-controlgroup 과 ui-controgroup-horizontal
CSS 클래스 두개가 추가 된 것을 보실 수 있을 겁니다. 그리고 ui-block-a
and ui-block-b
CSS classes 가 있는 두개의 <div>
elements 들이 있구요. 여기에 버튼들이 삽입됩니다.
<a>
link에 data-role="button"
attribute 가 있기 때문에 button 으로 변환 됩니다.
결론적으로 테이블을 만들기 위해 jQuery Mobile 에 의해 만들어진 HTML 은 그리 많이 변환되지 않았습니다. 버튼 같은 특정 element 들만이 modify 됩니다. table structure 그 자체는 변환되지 않습니다.
A table of buttons (continued)
HTML에 data-role="controlgroup"
와 data-role="button"
attributes를 사용하지 않고 같은 결과를 얻어볼까요. 아래 샘플을 실행해 보세요.
Two
buttons side by side in the two cells of a table
해당 element들이 버튼으로 변환되고 같이 그룹화 되도록 하기 위해 button
() 과 controlgroup
() 메소드들을 사용했습니다.
jQuery Mobile 에 의해 생성된 화면을 보면 뭔가 2% 부족한 것을 느끼실 겁니다.
두 버튼의 width 가 같지 않죠. HTML 에서는 140px로 지정돼 있는데 말이죠. 그 이유는 button
() method 를 call 하면서 그 아이템에 assign 된 CSS 가 disable 됐기 때문입니다. 해결방법은 jQuery Mobile 이 버튼을 세팅하기 위해 사용한 CSS 클래스에 직접 스타일링 하는 방법이 있습니다. (ui-btn
class)
Define
this CSS class in our HTML page, in the head section of the page:
Definition
of the ui-btn class to style the buttons in the page
테이블 안에서 데이터를 관리하는 것은 주로 jQuery 의 메소드를 사용해서 구현합니다. jQuery Mobile에 의해 controlgroup
() method 가 추가되서 테이블의 다양한 component들에 visual group 을 제공하게 됩니다.
Dynamically create a table
이제 window에 dynamic 하게 table을 생성하려고 합니다. 이 테이블은 두개의 row와 세개의 column을 가지게 될 겁니다. 이것을 구현하기 위해 ui-grid-b
class 가 있는 <div>
element 를 생성합니다. 그리고 그 <div> 안에 ui-block-a,
ui-block-b
and ui-block-c
CSS classes를 가지고 있는 <div>
elements 들을 넣습니다.
수요일 다시 FAQ 시간 입니다. 오늘은 Lua 와 관련해서 자주 들어오는 질문을 모아봤습니다. basic Lua language 프로그래밍에서 루아 언어만의 특징도 다뤘습니다.
1. Do I need to end Corona code lines with “;”?
아래와 같은 Corona(Lua) 코드를 보셨을 겁니다.
local myRect = display.newRect( 0, 0, 100, 50 );
또 아래와 같은 코드도 보셨을 겁니다.
local myRect = display.newRect( 0, 0, 100, 50 )
두 코드가 다른 것은 맨 마지막에 semicolon (“;”) character가 있느냐 없느냐죠. 많은 languages(JavaScript, C++, ObjectiveC, etc.) 라인의 끝을 가리키는 표시로 semicolon을 요구합니다. 하지만 Lua 는 굳이 semicolon을 넣지 않아도 스스로 알아서 라인의 끝을 인식합니다. 또한 맨 마지막에 semicolon 을 넣어도 상관은 없습니다. 단지 반드시 넣어야 되는 것은 아닙니다.
가끔 한 줄에 여러 statement를 넣을 때가 있죠.
a = 100; b = 200
Lua 에서는 아래 코드도 틀린 구문이 아닙니다.
a = 100 b = 200
2. Can Lua functions return multiple values?
이 기능은 Lua 만의 기능입니다. 바로 함수에서 여러 return 값을 반환할 수 있다는 거죠.
아래 예제를 보세요.
local function testConnection()
if not noConnection then
return false, "Connection Failed!"
else
return true
end
end
local result, reason = testConnection()
print( result, reason )
connection이 fail 되면 false를 return 하고 동시에 string 도 return 할 수 있습니다. connection 이 제대로 작동하면 true 만 return 합니다. (reason 의 값은 nil 이 될 겁니다.)
3. Can you assign multiple values to multiple variables?
또한 Lua 에만 있는 편리한 기능이 한번에 여러 변수에 여러 값들을 대입하는 겁니다.
local red, green, blue = 100, 255, 128
이것은 아래 코드와 같습니다.
red = 100
green = 255
blue = 128
둘 중 어느 방법을 사용할 지는 여러분의 선택에 달렸습니다. 둘 다 맞는 거니까요.
4. Are parentheses needed in “if” statements?
몇 몇 language 들에서는 conditional statement 에 parentheses({}) 를 사용해야 합니다.
-- C code
if ( a > b) {
...
}
Lua 에서는 optional 입니다. 단지 then 과 end 를 사용해야합니다.
-- Lua code
if a > b then
...
end
5. How do I add Block Comments to my code?
Block 주석은 코드에 어떤 설명을 넣거나 개발을 할 때 유용하게 사용할 수 있습니다.
아래 예제가 있습니다.
--[[
local function testConnection()
if not noConnection then
return false, "Connection Failed!"
else
return true
end
end
--]]
이 주석은 “––[[“로 시작해서 ”––]]”로 끝났습니다. 루아에서는 이 주석을 해제하는 간단한 방법을 제공합니다. 주석 시작부분에 - 를 한번 더 넣으면 주석이 해제 되는 겁니다.
---[[
local function testConnection()
if not noConnection then
return false, "Connection Failed!"
else
return true
end
end
--]]
위의 코드는 실행 될 겁니다. 왜냐하면 “–––[[“ (three dashes instead of two)를 사용했기 때문이죠.
우리 엔지니어들한테 물어보면 디바이스의 오디오 관련해서 아무런 문제 없이 다루는 것이 어렵다고 말합니다. 애플조차도 그렇게 하지는 못합니다. 다만 다른 것들 보다 문제가 덜 생기도록 만들죠.
daily build 942에서부터 우리의 오디오 backend로 Android 2.3+ 디바이스에 있는 OpenSL-ES 를 사용하기 시작했습니다. 이 back-end 는 뭐하는 걸까요?
처음 듣는 분들을 위해 말씀 드리자면 오디오가 작동되지 않는 디바이스(e.g. the Vizio, one of the
Samsung SII models, etc)의 고질적인 문제 점들을 수정했다는 얘기입니다. 또한 아주 미묘한 performance 개선 사항들이 있습니다. 예를 들어 동시에 여러 sound를 play 할 경우 hisses and pops 같은 것들이 찌그러지는 경우가 있는데 이런 부분들이 살짝 개선됐습니다.
만약 안드로이드의 ‘EggBreaker’ sample 을 play 하면 객체가 튕기는 시점에 튕기는 소리가 나지 않는 것을 느끼실 수 있을 겁니다. 이것은
longstanding latency 문제 때문인데요. 안드로이드 초창기부터 있어 왔던 겁니다. 즉 안드로이드 OS와 관련한 이슈중 하나죠. 최근 이 부분이 아주 살짝 개선되기는 했습니다. 이번 개선사항 중 가장 중요한 것은 안드로이드의 Core OS change 로 부터 온 것 입니다. Android 4.1 인 JellyBean 부터 적용됐습니다.
New Widgets!
저희들은 widget framework 을 좀 더 개선하고 cleaning up 하기 위해 많은 노력을 기울였습니다. initial framework을 생성했을 때 오리지널 코드를 상하기 쉽도록 하는 많은 것들(brittle, fragile, and
just unmaintainable)을 접합니다.
widget framework 에 대해 개선하고 싶은 부분들이 아주 많이 있지만 간단하지 않은 부분들 또한 많이 있습니다. 저희들이 하기로 한 부분은 각 widget들의 어떻게 해야 제대로 작동하는 것인지에 대해 rethink 해 보기로 했습니다.
기존 widget에 rewrite 하는 부분은 위험도가 있습니다. 저희들은 새로운 widget을 먼저 만들고 이 부분이 확실하게 동작하면 이 새로운 widget들을 이전의 widget들과 바꿀 겁니다.
Daily build 942 에는 새로운 몇개의 widget들이 선보입니다.
On/Off Switch. 3가지 형태로 나옵니다.: an actual on/off switch, a checkbox, and a single radio button.
Spinner. The canonical use-case is lots of photos being download
asynchronously. Note if you make a blocking API call (e.g. a luasocket
call), this will not animate. For that case, you should use
native.setActivityIndicator().
Stepper. You tap ‘+’ or ‘-’ and the values go up and down within a predefined range.
Progress view. A bar that goes from 0% to 100% filled.
좀 더 많은 정보들은 API docs 의 daily build 942 snapshot 부분에서 보실 수 있게 될 겁니다. 또한 이번 빌드에서 업데이트된 WidgetDemo sample
app 을 제공해 드릴 겁니다.
다음에 저희들이 작업할 widget들은 segmented controls 와 search fields 입니다.
A Teaser
Finally, I’m going to talk about something that I’m not really going
to talk about — yet. What I mean is, this topic deserves a post of its
own, so we’re saving that for next week. What am I talking about?
마지막으로 지금 얘기할 것은 이번 글에서 다루지는 않을 겁니다. 무슨 얘기냐 하면 이 이슈는 따로 글로 작성해서 보여드릴 거라는 겁니다. 다음주에 이와 관련해서 말씀 드리겠습니다.
할로윈 시즌 입니다. 오늘은 코로나의 blend modes 에 대해서 다루겠습니다. 그리고 이것이 어떻게 앱 내에서 창조적인 비쥬얼 효과를 내는데 사용될 수 있는지에 대해서도 알아보구요. 대부분의 Corona API들이 그렇지만 이런 효과도 간단한 코딩에 의해서 구현할 수 있습니다. Blend mode는 다양한 시각 효과에서 아주 유용하게 사용할 수 있습니다. 그리고 포토샵 같은 데서나 낼 수 있었던 그런 효과들을 내고 싶은 디자이너들도 활용하실 수 있습니다. blend mode가 무엇인지 모르시는 분들은 이 글을 끝까지 읽으세요. 이 글에서는 두개의 Halloween-theme image들을 사용할 겁니다. spooky swamp 와 wisps요. 이 글을 그대로 따라하면서 배우고 싶으신 분들은 여기에서 이미지를 다운 받아서 사용하세요. (제가 만든거니까요 다른데에 배포하지는 말아주세요.)
Layers and Pixels
다른 그래픽 어플리케이션과 개발 언어와 마찬가지로 코로나에도 layers 가 있어서 back에서 front로 z-index 순으로 비쥬얼 객체들을 arrange 합니다. 레이어들은 코로나에서는 display groups를 말하고 용법은 같습니다.
보시는 바대로 위 레이어에 있는 객체(wisps) 의 모든 픽셀들은 그 아래 있는 레이어의 객체 앞에 overlap 돼 있습니다. 그리고 그 픽셀들이 렌더링되서 뒤의것과 잘 조화 돼 있죠. 이것은 Painter's Algorithm 이라는 개념입니다. 실제 캔버스에 그림을 그린다고 보면 붓질을 하면 물감은 이전 물감의 위에 덧칠되게 됩니다. 이것이 Painter's Algorithm 입니다.
About Visual “Blending”
위의 예와 같은 기초적인 layering 도 유용하고 필요한 기술이긴 하지만 creative visual effect를 구현하기에는 한계가 있습니다. 그래서 대부분의 그래픽 애플리케이션은 (코로나도 마찬가지구요.) 레이어들에 blending 이라는 사용할 수 있도록 허용하고 있습니다.
core level에서 보면 blending 은 수학적인 알고리즘을 이용해서 여러 레이어들에 걸쳐 픽셀들이 overlapping 돼 서로 combine
(blend) 하도록 하는 메소드 입니다. 단지 위에 오는 레이어의 픽셀들이 밑의 픽셀들에 overlapping 되서 밑의 것을 안 보이도록 하는 것이 아니라 blend를 사용하면 multiple pixels 들이 한꺼번에 보이게 됩니다.
현실세계를 상상해 보시죠. Painter’s Algorithm analogy를 사용하면 붓의 터치가 가해지면 밑의 색에 덧칠 됩니다. 또 그 색에 붓질을 하게 되면 마찬가지로 덧칠을 하게 되죠. blend 도 마찬가지로 digital painting canvas 에서 똑 같은 일을 하는 겁니다. 다만 실제 세계의 캔버스에서와는 다르게 표시되게 되죠.
디지털 환경에서 생각해 보면 blending은 3원색-red, green, and blue (RGB)- 모두에 적용 됩니다. 이 각각의 색을 channel 이라고 하는데요. 더 자세히는 다루지 못하지만 각 channel 마다 0 에서 255 까지의 숫자 범위가 있다는 것은 알아 두시기 바랍니다. 0 은 none 을 의미하고 255는 maximum을 의미합니다. 얼마나 이런 channel 들이 mix 되느냐에 따라서 최종 색이 결정 되는 겁니다. RGB 값 0,0,0 은 검은색이고 255,255,255 는 흰색입니다. 이 RGB에 대해 더 자세히 알고 싶으시면 여기를 참조하세요.
이 튜토리얼을 보시려면 각 color channel 마다 0-255 의 숫자 범위가 있다는 것만 아시면 됩니다. 이 글에서는 blend 가 어떻게 각 channel의 숫자들을 다루고 그 픽셀의 최종색을 만드는지를 설명 드릴 겁니다.
object.blendMode
코로나에서 객체에 blend mode를 apply 하려면 blendMode parameter에 add, multiply, screen, or normal 중 하나의 값을 대입시키면 됩니다.
예를 들어
wisps.blendMode = "add"
“normal” blend mode (default) 는 그냥 blend mode를 사용하지 않는다는 의미입니다. 그 외에 3개의 blend mode에 대해서는 아래에서 설명 하겠습니다.
한가지 기억하셔야 할 것은 반드시 blend mode는 per-object basis로 apply 해야 한다는 것입니다. object:setFillColor() 와 비슷합니다. blend mode를 전체 display group에 한번에 적용할 수는 없습니다. 하나의 display group 에 다 같은 blend mode를 적용하시려면 display group 의 child 만큼 loop를 돌려서 각각의 아이템마다 blend mode를 별도로 적용시켜야 합니다.
Blend Mode “add”
add blend mode 는 불이나 레이저, exaggerated 같은 glowing visual effects를 주는데 효과적입니다. 대부분의 그래픽 애플리케이션에서는 linear dodge로 알려져 있기도 합니다. 하는 일은 단순하게 모든 레이어에 걸쳐서 각 color channel 의 값을 adds 하는 겁니다.
이제 테크니컬하게 들어가 볼까요! 객체에 부여된 RGB 값들은 아래와 같습니다.
background: ( 34, 34, 44 )
red circle: ( 255, 51, 51 )
green circle: ( 0, 153, 51 )
blue rectangle: ( 102, 153, 204 )
With each object set to blendMode=“add”, Corona’s OpenGL engine simply adds the channel values for each pixel.
각 객체마다 blendMode=“add”로 세팅 돼 있습니다. 코로나의 OpenGL 엔진은 단순히 각 픽셀의 channel 값을 더할 겁니다.
산수를 한번 해 보죠. 빨간 원과 배경이 합쳐지는 부분에 대해 계산을 합니다.
R: 34 + 255 = 289
G: 34 + 51 = 85
B: 44 + 51 = 95
R (red) 값은 255를 넘었네요. (maximum 값이 255 잖아요). 이럴 경우는 그냥 255로 됩니다. 그러니까 최종 RGB 값은
(255,85,95) 가 되죠. 원래 빨간색의 RGB 값은
(255,51,51) 였죠. 두 이미지에서 빨간 원 부분을 보세요. blend 가 적용된 부분의 좀 더 밝아 졌죠.
다음은 좀 더 복잡한 부분을 볼까요. 빨간색과 녹색 원이 겹쳐지는 부분입니다. 그리고 파란 네모가 겹쳐진 부분은 제외하구요.
이 경우 background 까지 합해서 각 channel 의 값들의 합을 구합니다. 255 가 넘는 겂이 있으면 그냥 255로 정해 지는 거구요. 그러면 최종값은
(255,238,146)이 됩니다.
이 add blend를 사용하면 우리의 Halloween scene 은 어떻게 될 까요? wisps 에 blendMode=“add”를 적용하면 좀 더 creative 한 효과를 볼 수 있습니다. 하얀 wisps 부분은 눈부시게 빛나는 것 같고 어두운 wisps 부분도 (원래 보라색이었던 부분) 약간 빛나면서 번져 보입니다.
여기에는 없지만 만약 black
pixels 들이 있다면 그 픽셀들은 완전 투명하게 될 겁니다. 왜 그러냐구요? 검은색의 RGB 값은 (0,0,0) 이거든요. 그러니까 픽셀에 아무 값도 더해지지 않게 됩니다. 그러면 당연히 밑의 색이 그대로 보이겠죠. 그러니까 검은색은 투명한 효과가 나게 되는 겁니다.
요약하자면 add blend mode는 각 color channel 의 값을 더해 주는 겁니다. 더해진 값이 255가 넘으면 그냥 255로 정해지는 거구요. 그러니까 모든 색이 더 밝아 지겠죠. additive blending 은 그래서 레이저, 불, flash 들 같은 밝고 colorful 한 효과를 내는데 좋습니다.
IMPORTANT NOTE: 저 위에서 계산하는 거 보셨죠? 여러분이 프로그래밍할 때 저 계산을 할 필요는 없습니다. 코로나에서 해 주니까요. 여러분은 그냥 어떤 blend 효과를 사용할 지만 정하시면 됩니다.
Blend Mode “multiply”
이 이름만 보고는 딱 와 닿지 않지만 multiply blend mode는 사실 좀 더 어둡게 만드는 효과가 필요할 때 사용하시면 됩니다. 예를 들어 그림자 효과 같은 것을 넣을 때 좋죠.
color channel value들을 더하는 대신에 multiply blend mode는 (짐작하시겠지만) 그 값들을 multiply (곱하기) 합니다. 이렇게 하면 RGB channel 값이 65025 (255*255) 같이 아주 높아지겠죠. add blend mode 였다면 모두 255(하얀색)이 될 겁니다. 그런데 왜 multiply blend 는 좀 더 어둡게 될 까요? 왜냐하면 곱한 값을 다시 255로 나누거든요.
아래 그 공식을 보겠습니다.
resulting color = ( top color * bottom color ) / 255
다시 각 부분의 RGB 값을 볼까요.
background: ( 34, 34, 44 )
red circle: ( 255, 51, 51 )
green circle: ( 0, 153, 51 )
blue rectangle: ( 102, 153, 204 )
먼저 곱한 다음에 그 값을 다시 255로 나누기 때문에 결과값이 낮은 겁니다. 그러면 더 어두운 색이 되겠죠. 검은색은 어떻게 되는지도 보셔야 할 겁니다. 검은색은 그 값이 0 이죠. 0에 무슨 값을 곱해도 0 이 되죠. 그래서 black 인 부분은 항상 black 이 됩니다.
아래 이미지는 Halloween 이미지들에 blendMode=“multiply” 값을 세팅한 결과 입니다.
보시다시피 wisps 가 있는 부분들은 더 어두워 졌죠? 이 효과는 이런 Halloween 에 맞는 효과는 아니네요. 그냥 multiply blend 가 어떻게 효과를 내는지 이해하는데만 사용하세요. 흰색(255) 부분은 어떻게 됐을 까요. 255에 무엇을 곱하더라도 다시 255로 나누면 그냥 그 색이 되겠죠? 그러니까 이 효과에서는 흰색은 투명한 효과가 납니다. 그냥 밑에 있는 색이 그대로 보이는 거죠.
Blend Mode “screen”
screen blend mode 도 add blend mode 와 마찬가지로 좀 더 밝게 만들어 주는데요. 다만 아주 어두운 부분은 오히려 lightening 하지 않습니다. 이 blend mode의 algorithm은 좀 복잡한데요. channel 값들은 마이너스를 하고 곱하기를 하고 그리고 다시 마이너스를 하고 뭐 그렇습니다.
아래 그 공식이 있습니다.
resulting color = 255 - ( ( ( 255 - top color ) * ( 255 - bottom color ) ) / 255 )
multiply blend 의 반대 효과를 주어서 밝게 만듭니다. 그러니까 add blend 와 비슷한 효과를 주기는 하지만 아주 똑 같지는 않구요.
이 screen blend 의 공식은 복잡합니다. 다행히 여러분은 이런 계산을 하지 않으셔도 됩니다. 단지 여러분은 Halloween 장면에 어떤게 더 효과적인지만 정하시면 됩니다.
이것도 효과가 괜찮네요. 이 효과의 특징은 additive blend 와 비슷하지만 그것보다 살짝 연하다는 겁니다. wisps 의 어두운 부분들은 아주 연하게 표현이 됐습니다. 이렇게 어두운 부분은 additive blend 가 좀 더 낫지 않나 싶네요.
In Summary
코로나에서의 Blend modes는 특정 상황에서는 아주 powerful 한 tool 이 될 수 있습니다. 이 기능을 적용하는 것도 아주 간단합니다. (단지 한 줄만 코딩해 넣으면 됩니다.) 코로나의 그래픽 엔진이 모든 계산을 다 해 줄 겁니다. 어떤 blend mode를 사용할 까는 여러분 앱의 scene 에 어떤 효과를 넣어야 할지 여러분이 결정하시면 됩니다. 질문이 있으신 분들은 여기 에 댓글로 질문해 주세요. Happy Halloween!
tistory444_01.html
action5.php
