Dash 파이썬 유저 가이드 한글 - Dash Tutorial / Part 2. Layout

원문 출처 - https://dash.plotly.com/layout

Part 2. Layout | Dash for Python Documentation | Plotly

 

* 이 문서는 대시 튜토리얼의 2장입니다. 이전 장에서의 설치가 완료되어야 진행이 가능하며 다음 장은 Dash Callback들을 설명합니다.

 

이 튜토리얼은 여러분에게 Dash app들에 대한 기초적인 접근을 안내할 것입니다. app layout을 이해할 수 있는 여섯가지 예시들을 통해 살펴보도록 하겠습니다.

 

Dash app을 다양하게 꾸미기 위해, 우리는 Dash Enterprise Design Kit 활용 하는 것을 추천합니다.

--------------------------------------------------------------------------------------------------------------------------

 

대시 앱은 두가지 부분으로 구성되어 있습니다. 첫 부분은 layout이라고 하는 부분이며 이는 앱이 어떻게 구성되고 보여지는 지에 대한 부분을 담당합니다. 두번째 부분은 앱의 다양한 반응성을 확인하는 부분이며 다음 챕터에서 알아가도록 하겠습니다.

 

Note : 이 문서를 통해 구현되는 예시 코드들은 파일들로 저장되어 python app.py 명령어를 통해 실행이 가능합니다. 또한 JupyterDash 라이브러리를 통해 주피터에서도 실행이 가능합니다.

 

* 만약 당신이 Dash 기업용 Data Science Workspaces를 사용하고 있다면, 아래의 코드를 복사해서 수행할 수 있습니다.

 

시작에 앞서, app.py라는 이름의 파일을 만들어 두시고, 아래의 코드를 복사한 다음, python app.py 명령어를 통해 실행합니다. 

# 문서 부분의 이해를 위해 캡쳐를 진행하였으며, 페이지에 이동해 복사 붙여넣기가 가능합니다.

Hello Dash

Dash : 당신의 데이터를 위한 웹 애플리케이션 도구 

#위와 같은 결과물이 보이실 것이고 아마 위에 보이는 ip 주소가 뜨실겁니다

 

다음  http://127.0.0.1:8050/ 주소를 당신의 웹 브라우저에서 방문하십쇼. 그럼 위와 같은 이미지를 보실 수 있을겁니다.

 

노트

1. layout은 다양한 "컴포넌트"로 구성되어 있습니다. html.Div와 dcc.Graph와 같은 것들로요.

2. Dash HTML모듈은 모든 HTML 태그들을 구비하고 있습니다. html.H1(children='Hello Dash')  컴포넌트는 <h1>Hello Dash</h1> 라는 HTML코드를 당신의 앱에서 만들어내는 부분입니다.

3. 모든 html코드들이 순수 코드는 아닙니다. Dash의 핵심 컴포넌트 모듈(dash.dcc) 는 더 높은 레벨의 구성을 포함합니다. 이들은 유동적이며 자바스크립트, HTML,CSS,React 와 같은 다양한 코드들로 생성됩니다.

4. 각각의 컴포넌트들은 키워드 속성값들을 통해 묘사됩니다. 대시는 선언가능합니다(코드로 지정하여 나타낼 수 있다 이런의 미인듯) 당신은 최초로 당신의 앱에서 이러한 속성들을 통해 묘사를 진행할 것입니다.

5. children 속성은 매우 특별합니다. 관습적으로 이는 당신이 생략가능하여 표현할 수 있는 첫번째 속성값입니다. 

html.H1(children='Hello Dash') 라는 코드는 html.H1('Hello Dash') 와 같은 기능을 수행합니다. 이는 문자열, 숫자, 단일 객체, 그리고 리스트 컴포넌트들을 포함할 수 있습니다.

6. 당신의 앱에서의 폰트들은 여기(코드를 통해 표시되는 부분)서 묘사된 폰트들과 다소 차이가 있을 수 있습니다. 이 애플리케이션은 CSS 와 Dash Enterprise Design Kit을 통해 구동되며 원소들의 초기 값을 수정하였습니다. 당신이 수정 가능한 CSS를 배우고 싶다면 CSS Tutorial을 참조할 수 있습니다.

 

첫번째 변화를 만들어 보자

Dash는  "Hot-reloading" 기능을 포함하고 있습니다. 이는 app.run_server(debug=True) 를 작성함으로써 기본적으로 수행됩니다.

 

이는 당신이 코드를 바꿀 경우 자동적으로 브라우저를 새로고침하여 반영할 수 있다는 것입니다.

*hot-relading 기능이 싫으신가요? app.run_server(dev_tools_hot_reload=False) 를 작성해서 사용을 하지 않을 수 있습니다.  Dash Dev Tools documentation 에서 더 알아볼 수 있습니다. 질문이 있으신가요? community forum hot reloading discussion. 를 확인해 주세요.

 

HTML 컴포넌트에 관하여

Dash HTML 컴포넌트들(dash.html)은 모든 HTML 태그의 컴포넌트 클래스를 담고 있습니다. 이는 기본적인 html 키워드 값으로 구성되어 있습니다. 이제 우리의 앱에서 inline 스타일 속성을 변경해 봅시다. app.py 라는 파일을 만들어 아래와 같은 코드를 복사합니다. 

이 예에서, 우리는 html.Div와 html.H1의 inline 스타일을 수정하였습니니다. 이때 style 속성을 사용하여 수정한 것을 확인할 수 있습니다.

 

위의 코드는 대시 애플리케이션에서 

 <h1 style="text-align: center; color: #7FDBFF">Hello Dash</h1>.

위와 같은 코드로 변환되어 구동됩니다.

 

아래에 dash.html 과 HTML 속성들간의 중요한 몇가지 차이가 존재합니다.

  1. style 속성은 html에서는 세미콜론으로 구분되어 사용되만, dash 에서는 딕셔너리 형태로 작성만 하면 됩니다.

  2. style 딕셔너리 내의 key값들은 CamelCase(단어별첫글자 대문자)로 작성이 됩니다. 그래서 text-align 대신 textAlign으    로 작성됩니다.

  3. HTML class속성은 className으로 Dash에서 활용됩니다.

  4. HTML의 children 태그는 children 키워드로 별도로 구분되어 활용됩니다. 관습적으로 이는 항상 생략할 수 있는 첫번째 속성값으로 인식되어 활용됩니다.

 

이 외의 모든 HTML 속성과 태그 값들은 당신의 파이썬 코드로 작성이 가능합니다!

 

 재사용 가능한 컴포넌트들

우리의 마크업을 파이썬으로 적음으로써, 우리는 복잡한 재사용가능한 컴포넌트들을 문맥과 언어의 변경의 필요가 없이 손쉽게 다시 활용이 가능합니다.

 

아래에 판다스 table 을 생성하는 코드가 있습니다. 이는 판다스 데이터프레임으로 가동됩니다.

app.py 라는 파일을 만들어 아래의 코드를 복사하여 실행하여 봅시다.

시각화에 관한 더 많은 정보

Dash Core Component module(dash.dcc) 들은 Graph라고 불리는 컴포넌트를 포함하고 있습니다.

 

Graph 는 반응형 데이터 시각화를 만들어 내며, 이는 오픈소스인 plotly.js 자바스크립트 그래픽라이브러리를 활용하고 있습니다. 이 패키지는 35개가 넘는 차트 형태를 지원하며 당신의 차트를 벡터퀄리티인 SVG 형식 혹은 WebGL을 통한 고성능 형태로도 출력이 가능합니다.

 

figure 변수는 Graph 컴포넌트와 동일하며 figure 변수는 plotly.py에서 활용됩니다. plotly.py는 파이썬 그래픽 라이브러리의 일종입니다. plotly.py documentation and gallery  에서 관련정보를 확인할 수 있습니다.

 

아래에 판다스 데이터프레임을 활용한 산포도를 그리는 예시를 확인할 수 있습니다. app.py라는 파일을 만든 후 아래와 같은 코드를 복사하여 수행해보도록 합니다.

*이 그래프들은 반응형이며 동작이 가능합니다. 포인트 위에 호버링을 하여 그들의 값을 추정할 수 있고, 범례를 클릭하여 축에서의 표시를 끄고켤 수 있으며, 클릭과 드래그로 줌이 가능하며, 붙잡아서 아래쪽 이동이 가능하고 클릭과 드래그로 축 조절이 가능합니다.

 

마크다운

Dash 에선 dash html 컴포넌트를 통해 html을 노출시키는 반면, html코드를 직접 작성해서 표시가 가능합니다.

블록 형식 텍스트를 작성함으로 써, 당신은 Markdown 컴포넌트를 Dash Core Components에서 작성이 가능합니다.

아래와 같은 코드를 app.py를 만든 후 붙여넣기 하세요(아래쪽 텍스트는 그 결과물입니다)

코어 컴포넌트

Dash Core Components(dash.dcc) 들은 높은 레벨의 컴포넌트 집합을 포함합니다. 그래서 드롭다운, 그래프, 마크다운 블록과 같은 다양한 형태를 구현할 수 있습니다.

Dash components 들과 마찬가지로, 그들은 전부 선언 형식으로 작성할 수 있습니다. 모든 조정가능한 옵션은 컴포넌트 내에서 키워드 변수로 설정이 가능합니다.

 

우리는 튜토리얼을 통해 다양한 컴포넌트들을 확인할 것입니다. 당신은 모든 컴포넌트에 대한 확인을 Dash Core Components overview 에서 확인할 수 있습니다.

 

아래에 보이는 컴포넌트들은 이들 중 일부입니다. app.py라는 파일을 만들어 아래의 코드를 붙여넣고 실행해보세요

Help

대시 컴포넌트들은 선언적입니다. : 모든 설정가능한 것들은 키워드 변수로 설정되어 지정이 가능합니다.

파이썬 콘솔에서 help를 입력하여 모든 컴포넌트 들에 대한 정보들을 확인할 수 있고 해당 컴포넌트가 활용 가능한 모든 변수들을 확인할 수 있습니다.

 

요약

 

layout은 Dash 앱에서 앱이 어떻게 생겼는지를 나타내는 부분입니다. 이는 컴포넌트들의 계층적 구조를 통해 구성됩니다.

Dash HTML 컴포넌트(dash.html) 은 모든 형태의 HTML 태그를 지원하며 키워드 속성값도 지원합니다.

style, class, id와 같은 속성들도 지정이 가능합니다. Dash Core Components(dash.dcc)의 경우 더 수준 높은 레벨의 컴포넌트 들을 생성할 수 있으며 컨트롤 혹은 그래프등을 정의합니다. 

 

자세한 예시들은 

 

• Dash Core Components overview

Dash Core Components | Dash for Python Documentation | Plotly

• Dash HTML Components overview

Dash HTML Components | Dash for Python Documentation | Plotly

에서 확인할 수 있습니다.

 

다음 장은 앱들을 상호 활동적으로 만들 수 있는 것들을 배울 것입니다.

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

이거 적느라 45분 가량 걸렸다 ㅠ 생각보다 붙이고 번역하고 하는데에 품이 많이 든다. 문서 하나가 이렇게 길어서야 얼마나 많은 양을 해내야 될 것인지에 대한 엄두가 나질 않는다. 하지만 한글로 적힌 문서를 보고 누군가 도움을 받을 수 있다면 뿌듯할거라는 생각에 조금씩 해내보려고 한다. 파이썬 대시보드 작업이라는 것이 기본적으로 요구되는 사항이 되어가는 요즘, 이런 게시글을 통해 누군가가 도움이 됬으면 좋겠다는 맘으로 적어본다.

 

누군가는 나처럼 헤매면서 대시보드 만드는 작업을 하지 말길!

 

파이썬을 통한 대시보드 작업을 하는 모두 화이팅!