[layout계산기] 포토샵 및 시안 작업시 배너간격 및 사이즈 배치를 도와드립니다.

순전히 일을 하다가 필요할거 같아서 만들어 보았습니다. 

포토샵으로 시안을 작업할 경우 같은 사이즈의 배너를 같은 간격으로 정렬해야 되는 경우가 있습니다. 자주는 아니지만, 

가로 간격은 제한적이고, 배너 숫자를 고려햇을 때 간격과 배너의 크기는 얼마나 할 것인가 ..

항상 엑셀을 켜두고 계산을 했습니다. 물론 엑셀로 하면 되지만,, 

재미삼아 만들었습니다. 

원리는 이렇습니다. 


예를 들어, 가로폭이 1450px의 화면에 5개의 배너를 20px 간격으로 배치를 합니다. 

이럴 경우 계산을 하죠, 가로폭 - 간격의 합(배너숫자에서 -1 * 20px) 

ex ) 1450 - ((5-1)*20) = 1325

1325 나누기 배너개수 = 1325/5 = 265

이러면 가로폭이 265px 배너를 20px 간격으로 배치를 하면 되는 것이죠.. 

이 것을 조금 편리하게 해본 것입니다. 

 

web.paper | 박스 레이아웃 계산기

박스 레이아웃 계산기

http://www.webpaper.kr/generator

 



첫 화면에서 위에서 언급했던 항목들을 입력합니다. 

전체 가로사이즈, 배너 개수, 배너간격, 그리고 양쪽으로 동일한 크기의 간격이 필요한 경우 

입력 후 Create 버튼 클릭!



그럼 하단에 이렇게 화면이 표출됩니다. 

1500px /1500px (0px)

이렇게 표시가 된 부분에 대한 설명을 드리자면, 

앞이 1500px은 현재 하단에 계산되어 나온 박스들의 합입니다. 

두번째 1500px은 사용자가 입력한 기준 값입니다. 

그리고 뒤의 괄호안의 숫자는 두 숫자간의 차이를 나타냅니다. 

이렇게 한 이유는 현재 예시처럼 정수로 딱 떨어지는 경우도 있지만 그렇지 않은 경우도 있습니다. 

그럴 경우 소수점 한자리로 고정해서 계산하고, 사용자가 직접 미세 조정을 통해서 작업하도록 합니다. 

전체 사이즈 및 퍼블리싱을 고려할때, 간격이 모두 동일하게 안나오는 경우도 있기 때문입니다. 






위에서 설명한 숫자 아래의 버튼에 대한 설명입니다. 

Box / Inner Margin / Outer Margin 버튼들은 동일하게 숫자를 조정할 것인가 말 것인가를 체크하는 것입니다. 

즉 체크 표시가 되어 있습니다. 항목의 숫자를 변경하였을 때 해당 위치가 모두 동일한 숫자로 변경되는 것이고, 

체크를 해제하고, 변경하면, 변경한 숫자만 반영되는 것입니다. 





그리고 우측의 버튼은 가로 정렬과 세로정렬의 구분입니다. 






사실 뭐 이런 것 없이도, 엑셀로 다 할 수 있습니다. 

매번 열고 하는 것이 귀찮아서, 

자주쓰는 기능으로 한번 만들어 보았습니다. 

감사합니다.