구글의 튜토리얼_배열에 관한 문제

구글의 튜토리얼을 나름 꼼꼼히 살펴봤다고 생각했었는데 오늘 함수 몇가지를 다시 확인한다고 구글 사이트에 들렀다가 '이걸 왜 그땐 못봤을까' 싶은 부분을 발견했다.
다름이 아니라 포스트에서도 몇번 언급한 두방향 복사-Repeating a sub-component within a dynamic component (2 Dimensions)에 관한 부분인데 한방향 복사에 관한 부분만 보고 이 부분은 아마 별거 없을거라 여기고 눈여겨 보지 않았던 듯 하다.
 구글에서 사용하고 있는 방식(한방향, 두방향 모두)은 스케일 툴을 이용해서 전체 사이즈를 변경하면 그안에 포함되어 있는 하위콤포넌트가 변경된 사이즈에 맞게 개수를 변경하면서 배열되는 것을 구현하는 것인데, 내가 지금까지 사용한 배열방식과는 완전히 다르다고 할 수 있다. 이 사실도 오늘 알았는데 지금 돌이켜보면 한방향 복사에 관한 튜토리얼 조차도 제대로 보지 않았던 셈이다.
아무튼 새로운 걸 알았으니 한번 해봐야 하지 않겠나 싶어 해봤다. 세상의 수많은 사람들이 여길 들러 만들어 냈을 모델이지만 직접 해보지 않으면 무슨 소용.
일단 한 방향 배열은 패스하고,(이것도 초보자는 해봐야 하는 내용이다.) 두방향을 붙잡았는데 이거 영어가 뜻이 통하다가 말다가 해서 조금 헤매는 듯 했으나 수식이 원하는 바를 뒤늦게 알아채고는 휘리릭 완성시켰다. 스케일 툴을 이용해 크기를 변형시키면 tile이라고 정의 되어 있는 하위 콤포넌트가 알아서 개수를 맞춰 배열한다.
Image Ready가 안깔려 있어 gif 움짤은 생략.

그런데 여기서 멈출 내가 아니다. 세방항 배열도 해봐야 되지 않겠나.
이건 두방향 배열의 수식을 완전히 이해하면 자동적까지는 아니더라도 '조금만' 계산하면 뚝딱? 나온다. z 축 방향을 포함시켜 다이내믹 큐브가 완성.

초기 크기가 작은 상태

스케일 툴로 크기를 늘리면 잠시 이러고 있다가..

하단 상태바와 마우스 커서가 바쁘게 돌아가다가 요렇게 나온다.

그냥 배열하면 재미가 없기 때문에 x, y, z축에 따라 크기 변화를 준것.
박스 간의 간격도 설정
아래 첨부화일은 간격만 설정되어 있는 상태
수식이 무쟈게도 복잡해 보인다.;;

지금까지 써온 방식은 콤포넌트의 포함관계를 이용한 방법이라 직관적이긴 해도 수식(간단하지만)의 설정이 번거로웠던게 사실이다. 콤포넌트의 attribute를 일일이 각 단계마다 작성해 주는 것도 번거롭고, 두단계 위의 콤포넌트에서 변수를 상속하는 것도 불가능해 바로 위 콤포넌트가 다리 역할도 해줘야 하는 경우도 있었고.(서로 포함/종속 관계에 있는 콤포넌트의 attribute 변수는 동급, 상하 한등급씩 끼리만 상속과 공유가 가능하게 되어있다. 종속관계는 몇 단계까지라도 만들 수 있다.)그런 면에서, 그리고 크기를 맘대로 조절할 수 있다는 점에서도 구글의 튜토리얼은 장점이 있다. 그리고 정확히는 모르겠으나 느낌상 퍼포먼스도 더 빠른듯. 그러나 이 자체로 수식이 너무 복잡하다는 점 또한 무시할 수 없을 것 같다. 배열만을 위해서 동원되는 변수와 수식이 너무 많고 복잡하다. 저거 설명 안해주면 누가 들여다 보기나 하겠나. 경우에 따라 두가지를 적절히 선택해서 사용해야 할 것 같다.


작업화일 다운로드