글

작성일자

웹에서의 레이아웃을 위한 구세주, Flex

웹의 CSS를 이용해 가로에 대한 가운데 정렬은 그럭저럭 쉽게 지정할 수 있지만, 세로 정렬은 왠지 트릭같은 방식으로 지정하는 느낌을 받는다. 그렇다보니, 세로 정렬이 필요한 레이아웃을 구성할때마다 고충이 생기는데.. 이럴때 flex라는 비교적 최신의 CSS 방식을 활용해 이러한 고충을 제거하고자 이 글을 정리한다. 사실 flex 방식은 그 내용이 제법 방대하다. 하지만 체계적인지라 여러번 살펴보면 충분이 이해하고 실제 업무에 활용할 수 있다.

일단 앞서 언급한 가로와 세로에 대한 가운데 정렬을 위한 flex 방식을 이 글을 통해 간단이 언급해 둔다. 가운데 정렬이 필요할때마다 flex를 사용하다보면.. flex의 그밖의 요소들이 하나씩 접근하게 될 것이기 때문이다. 기술이란 그 필요에 의해 사용되고, 자연스럽게 사용되어질때 사용자가 보다 쉽게 이해할 수 있기 때문이다.

아래의 dom 구성에 대한 코드가 있다.


    
DIP2K

    
김형준

.container 안에 .item 항목을 가로와 세로로 가운데 정렬하고자 한다면 아래와 같은 스타일을 지정하면 된다.

실제 결과는 아래와 화면처럼 가로와 세로에 대해 가운데로 정렬된 것을 볼 수 있다.

DIP2K
김형준

DIV 요소는 display가 block이다. 그러나 flex의 내부의 항목으로 들어가게 되면 inline-block으로 변경된다는 점을 알 수 있다. 끝으로 이 글을 작성하기 위해 읽었던 문서는 “flexbox의 기본 개념”이다.

작성일자

FingerEyes-Xr의 GraphicLayer에 대한 최상위 지정(Top Most)

그래픽 레이어는 DBMS에 공간 데이터 저장을 위한 별도의 테이블을 준비하지 않아도, 자유로운 방식으로 지도 상에 원하는 위치 기반 데이터를 표시하고 이용할 수 있는 편의성과 유연성을 제공합니다. 그러다보니, 그래픽 레이어는 지도 상에 어떠한 요소보다 최상단에 표출되어 사용자에게 그 시인성을 확실하게 확인할 수 있는 것이 좋습니다. 아래의 화면은 CCTV를 지도 상에 표시하고 있는데, CCTV가 최상단에 노출되지 않음으로써 이러한 시인성 확보가 마련되지 않은 경우입니다.

FingerEyes-Xr에서 그래픽 레이어는 GraphicLayer라는 클래스를 통해 생성되는데, 아래처럼 간단히 topMost 매서드를 통해 최상단으로 지정될 수 있습니다.

var gl = new Xr.layers.GraphicLayer("cctv");

gl.topMost(true);
map.layers().add(gl);

결과적으로 아래처럼 해당 그래픽 레이어는 항상 최상단으로 표출됨으로써 그 시인성이 확보됩니다.

사용자를 위한 시인성 확보를 위한 방안으로 위처럼 기능으로써 개선될 수 있고, 디자인적으로는 그래픽 레이어에 표시되는 항목의 아이콘에 외곽선(Stroke)을 장식하여 훨씬 더 세련되고 강력하게 시인성을 확보할 수도 있습니다.

작성일자

비트(Bit) 단위로 생각하기 (비트 연산)

거의 대부분의 프로그래밍 언어를 학습하다보면 나오는 비트 연산은 이진 파일 포맷 분석, 해시, 암호화 등이 아닐 경우 거의 사용되지 않는다. 그래서인지, 관련 내용을 그냥 눈으로만 보고 이해하거나, 그냥 넘기는 경우가 다반사인데.. 그러다보니 비트연산에 대한 깊이 있는 이해가 수반될 일이 없어 더욱더 비트 연산을 쓸일이 없게 된다.

사실 비트 연산은 매우 최적화된 연산이고, 모든 기능들.. 즉 그 모든 복잡한 기능들을 구성하는 가장 최소 단위라고 할 수 있다. 일단 최적화된 연산이라는 관점에서 그 활용처를 생각해보면, 상태값을 담아두기 위해 저장소로 활용될 수 있는데.. 만약 8개의 상태가 필요할 경우 총 8개의 boolean 타입이 필요하다. 언어에 따라 다르지만 boolean 타입의 변수를 위해 할당하는 메모리의 양은 비트연산을 통해 동일한 기능을 수행하는 것에 비해 엄청난 양의 메모리를 사용하며 그 속도 또한 엄청나게 느리다.

여기서 8개의 상태값을 담아 두는 비트연산 기능을 코드로 들어, 필자 스스로를 위한 비트 연산의 이해를 다져 본다.

8개의 상태값을 담기 위해 부호가 없는 8비트의 정수 변수인 states를 정의하였다. 즉 8개의 상태 값을 저장하기 위해 단 1바이트만을 사용하고 있다. 코드는 이 states 변수의 2번째와 4번째 그리고 7번째를 On으로 하고 나머지는 Off로 상태로 설정하는 코드이다. 

var states uint8 = 1 << 1 | 1 << 3 | 1 << 6

이제 이 상태 변수를 통해 4번째의 상태를 파악하기 위해 다음의 코드가 필요하다.

if states&(1<<3) != 0 {
    fmt.Println("index 4 is ON")
}

그리고 상태에서 4번째만을 ON으로 하는 코드는 아래와 같다.

states = states | (1 << 3)

그리고 상태에서 4번째만을 OFF으로 하는 코드는 아래와 같다.

states = states &^ (1 << 3)

끝으로 4번째 상태를 토글(Toggle), 즉 ON이면 OFF로.. OFF면 ON으로 설정하는 코드는 아래와 같다.

states = states &^ (1 << 3)
작성일자

웹 UI ㅡ Accordion

웹에서 제공하는 표준 UI는 상당히 투박해서 거의 사용하지 않고, jQuery UI 등과 같이 유명한 라이브러리를 사용해 웹 어플을 개발합니다. 그러나 필자는 기존의 웹 UI 라이브러리를 사용하지 않는데.. 이유는 내가 원하는 UI의 형태와 느낌을 표현하기 위해 상당이 많은 시간과 노력이 투자되어야 하거나, 불가능한 경우라고 포기하며 타협하게 되기 때문입니다.

이번에 웹에서 접고 펼치는 Accordion UI가 필요해서, 직접 만들어 사용하고 있는데요. 아래는 그 UI에 대한 샘플 결과 이미지입니다.

뭐, 그닥 이쁘다거나 세련된 모양은 아닙니다. 하지만 UI의 멋은 Content으로 완성된다고 믿는 저에겐 충분합니다. 아래는 위의 UI를 구성하기 위한 Javascript 코드입니다.

<div id="div"></div>

<script>
var ui = new XrUI.accordion("div",
    {
        width: "320px",
        height: "400px",
        top: "50px",
        left: "60px",
        title: "어코디언 UI"
    }
);

ui.addItem("item1");
ui.itemTitle("item1").innerHTML = "Title1";
ui.itemContent("item1").innerHTML = "Content1";

ui.addItem("item2")
ui.itemTitle("item2").innerHTML = "Title2";
ui.itemContent("item2").innerHTML = "Content2";

ui.addItem("item3")
ui.itemTitle("item3").innerHTML = "Title3";
ui.itemContent("item3").innerHTML = "Content3";
</script>

어코디언을 구성하는 항목의 제목과 내용을 직접 innerHTML 등으로 구성할 수 있도록 DOM 요소를 노출하고 있는데요. 이 부분이 향후 이 어코디언 UI를 내가 원하는 형태과 내용으로 자유롭게 구성할 수 있는 통로가 됩니다.

이렇게 만들어진 웹 UI는 컴포넌트로써 실제 프로젝트에서 아래와 같은 형태로 초기에 응용되어 활용되었습니다.

기본적이고 단순한 틀은 유지하면서, 최대한 컨텐츠를 활용하여 UI를 꾸미고 있습니다. 프로그램의 기능은 배포후 점진적으로 개선 발전되듯이 UI 역시 편의성 등의 개선을 이유로 변경됩니다. 결국 현재는 아래와 같은 형태로 활용되고 있습니다.