PatternFly를 이용한 Web Page 개발

 

평생 C 언어, Go 언어로 Server Side 프로그램만 개발했던 나에게 새로운 과제가 생겼다.

Web Front End, Back End 개발 ~~~

 

밥벌이로 Web 프로그래밍을 한 것이 2003년이 마지막인데, 지난 19년 동안 개발 환경이 많이 변했겠지.

어렵풋한 기억에 PHP, Java Beans, JSP로 Web 서비스를 개발했었던 것 같다.

 

그냥 한 귀로 듣고 넘어가는 나의 푸념...
솔직히 2000년 ~ 2003년 사이에 내가 했던 개발 내용이나 방법보다는 자정까지 사무실에서 졸린 눈을 비비며, 고생한 흔적만 몸에 남은 듯...
그래서 웹 서비스 개발에 대한 나의 부정적 느낌이 여전히 남아 있다. ㅠㅠ
20년이 지나도록 그 느낌은 지워지지 않고 있다.
나에게 다시는 웹과 관련한 개발이 없을 줄 알았는데 ~~~ 이렇게 새로운 도전 과제가 주어졌다.

 

첫 삽은 PatternFly를 리서치하고, 내가 만들려는 Web App에 적절한지부터 파악해야겠다.

 

 

 

PatternFly가 뭐 하기 위해 만들어진 도구인가?

 

PatternFly Homepage에 소개된 글을 요약해보면, 아래 문장이 될 듯~~~

 

PatternFly는 
Application(앱) 전반에 걸쳐 UI 통일성을 유지하기 위한 Open Source Web UI Desgin 시스템.
그리고
Web UI 디자이너와 개발자가 협업할 수 있도록 Guidance와 Standard(표준) 업무 절차를 제공.

 

 

 

PatternFly 구조

Components

Web Page에 보여질 Text, Image(Picture), Table  같은 것.

 

Layouts

Screen의 가로, 세로 크기가 변하더라도 Web Page의 components가 Screen에 잘 보여지도록 components를 재배치한다.

 

Demos

PatternFly는 여러 Components를 조합해서 Layouts을 디자인하는 예제(Demo)를 제공한다.

유용한 Demo 코드를 제공하므로 이런 Demo 코드를 이용하면 적은 노력으로 Web UI를 만들 수 있다.

 

 

 

PatternFly 디자인 가이드라인

Style Guideline

컬러, 글씨체(폰트), 여백 같은 디자인 체계에 대한 가이드라인을 제시한다.

Usage and Behavior

Navigation, dashboards, form 같은 디자인 패턴에 대한 가이드라인을 제시한다.

UX Writing