안녕하세요 강승일입니다.
요즘 태블로로 데이터 시각화를 하면서 디자인이 적용된 대시보드를 많이 보실 수 있습니다.
디자이너가 아니더라도 쉽게 활용할 수 있는 Figma를 활용한 실습 샘플 가이드 및 영상을 공유 드립니다.
Figma (피그마)란?
누구나 쉽게 UI/UX를 반영할 수 있는 디자인 툴입니다.
PC에 설치할 수도 있지만 인터넷만 연결되면 바로 접속해 활용하실 수 있습니다.
Figma에 대한 전반적인 이해는
빅스데이터의 디자이너인 윤한별 선생님이 진행한 Figma design Class 101 사내 세미나를 참고하세요
영상 보러 가기 ▶ https://youtu.be/JeQVxFk8_ZU
Figma design Class 101 피그마 스타터 for 태블로에서는
다음과 같은 대시보드용 샘플 이미지 제작을 실습합니다.
1) Figma에서 회원 가입 및 로그인을 합니다.
https://www.figma.com/
2) New design file을 선택합니다.
3) 작성 페이지의 이름을 ‘Untitled’ 대신 ‘피그마 대시보드 실습’으로 변경합니다.
4) #(우물 정) 모양의 메뉴인 ‘Frame’을 클릭한 다음에 오른쪽 Design 메뉴 > Presentation > Slide 16:9를 선택합니다.
그러면 다음과 같이 16:9 기준 1920 x 1080 프레임이 표시됩니다.
5) 앞에서 지정한 Frame에 따라 프레임 이름이 지정되어 있는데 이걸 더블 클릭해서 ‘대시보드 디자인 실습’으로 변경합니다.
그러면 오른쪽 하단 Export에 변경된 프레임 이름으로 Export 준비되는 것을 볼 수 있습니다.
6) 배경 색상을 지정하기 위해 우측에 있는 ‘Fill’을 기본 색상인 흰색(FFFFFF) 대신에
‘697CE2’로 변경합니다.
7) 상단 메뉴에서 모양 도구(Shape tool)에서 사각형(Rectangle)을 선택하고 Frame 위에 그립니다.
8) 프레임에서 사각형의 자간을 30씩 반영하고자 합니다.
우측 Design에서 Width 값에 -60 (좌우 모두 30씩 자간 반영하기 위해) 적용합니다.
Height 값에서 -30을 추가한 다음에 하단은 자간을 30 반영하지만
상단에는 대시보드 타이틀과 메뉴를 추가하기 위해 사각형 위치를 이동시켜 여백을 더 많이 추가합니다.
9) 사각형의 배경을 흰색으로 변경하기 위해 Fill 메뉴에서 흰색에 해당하는 ‘FFFFFF’ 값을 모두 입력합니다.
10) 라운드형 사각형을 만들기 위해 사각형에 Corner radius에 30을 추가합니다.
11) 화면 우측 상단에 라운드 사각형 메뉴 버튼 3개를 만들려고 합니다.
상단 메뉴에서 사각형(Rectangle)을 선택 후 우측 상단에 사각형을 임의의 영역에 배치합니다.
그리고 하단의 사각형과 똑같은 색상으로 표현하기 위해 Fill에서 색상을 흰색 (FFFFFF)을 입력합니다.
12) 사각형에서 상단만 라운드를 추가하기 위해 Corner radius에서 Mixed 대신
첫 번째(좌상단), 두 번째(우상단)의 값을 각각 20을 추가하고
하단은 기본 값 그대로 0으로 둡니다.
13) 앞에서 만든 라운드 사각형의 메뉴를 추가로 2개 더 만들기 위해
Alt + Shift키 누른 다음에 드래그해서 같은 여백(자간)을 설정(자간 : 10) 정도로 만듭니다.
나머지는 다음 영상을 참고해 실습해 완성해 보세요!
영상 보러 가기 ▶ https://youtu.be/nFaFAPEhBFA
위 영상을 토대로 피그마 백그라운드 이미지에 데이터를 얹은 태블로 대시보드 예시입니다.
디자인 전문가가 아니더라도 퀄리티 높은 대시보드를 제작할 수 있습니다!
위 대시보드는 다음 링크를 참고하세요
https://public.tableau.com/app/profile/seungilkang/viz/2022QartarWorldcupTournament/2022
안녕하세요 강승일입니다.
요즘 태블로로 데이터 시각화를 하면서 디자인이 적용된 대시보드를 많이 보실 수 있습니다.
디자이너가 아니더라도 쉽게 활용할 수 있는 Figma를 활용한 실습 샘플 가이드 및 영상을 공유 드립니다.
Figma (피그마)란?
누구나 쉽게 UI/UX를 반영할 수 있는 디자인 툴입니다.
PC에 설치할 수도 있지만 인터넷만 연결되면 바로 접속해 활용하실 수 있습니다.
Figma에 대한 전반적인 이해는
빅스데이터의 디자이너인 윤한별 선생님이 진행한 Figma design Class 101 사내 세미나를 참고하세요
영상 보러 가기 ▶ https://youtu.be/JeQVxFk8_ZU
Figma design Class 101 피그마 스타터 for 태블로에서는
다음과 같은 대시보드용 샘플 이미지 제작을 실습합니다.
1) Figma에서 회원 가입 및 로그인을 합니다.
https://www.figma.com/
2) New design file을 선택합니다.
3) 작성 페이지의 이름을 ‘Untitled’ 대신 ‘피그마 대시보드 실습’으로 변경합니다.
4) #(우물 정) 모양의 메뉴인 ‘Frame’을 클릭한 다음에 오른쪽 Design 메뉴 > Presentation > Slide 16:9를 선택합니다.
그러면 다음과 같이 16:9 기준 1920 x 1080 프레임이 표시됩니다.
5) 앞에서 지정한 Frame에 따라 프레임 이름이 지정되어 있는데 이걸 더블 클릭해서 ‘대시보드 디자인 실습’으로 변경합니다.
그러면 오른쪽 하단 Export에 변경된 프레임 이름으로 Export 준비되는 것을 볼 수 있습니다.
6) 배경 색상을 지정하기 위해 우측에 있는 ‘Fill’을 기본 색상인 흰색(FFFFFF) 대신에
‘697CE2’로 변경합니다.
7) 상단 메뉴에서 모양 도구(Shape tool)에서 사각형(Rectangle)을 선택하고 Frame 위에 그립니다.
8) 프레임에서 사각형의 자간을 30씩 반영하고자 합니다.
우측 Design에서 Width 값에 -60 (좌우 모두 30씩 자간 반영하기 위해) 적용합니다.
Height 값에서 -30을 추가한 다음에 하단은 자간을 30 반영하지만
상단에는 대시보드 타이틀과 메뉴를 추가하기 위해 사각형 위치를 이동시켜 여백을 더 많이 추가합니다.
9) 사각형의 배경을 흰색으로 변경하기 위해 Fill 메뉴에서 흰색에 해당하는 ‘FFFFFF’ 값을 모두 입력합니다.
10) 라운드형 사각형을 만들기 위해 사각형에 Corner radius에 30을 추가합니다.
11) 화면 우측 상단에 라운드 사각형 메뉴 버튼 3개를 만들려고 합니다.
상단 메뉴에서 사각형(Rectangle)을 선택 후 우측 상단에 사각형을 임의의 영역에 배치합니다.
그리고 하단의 사각형과 똑같은 색상으로 표현하기 위해 Fill에서 색상을 흰색 (FFFFFF)을 입력합니다.
12) 사각형에서 상단만 라운드를 추가하기 위해 Corner radius에서 Mixed 대신
첫 번째(좌상단), 두 번째(우상단)의 값을 각각 20을 추가하고
하단은 기본 값 그대로 0으로 둡니다.
13) 앞에서 만든 라운드 사각형의 메뉴를 추가로 2개 더 만들기 위해
Alt + Shift키 누른 다음에 드래그해서 같은 여백(자간)을 설정(자간 : 10) 정도로 만듭니다.
나머지는 다음 영상을 참고해 실습해 완성해 보세요!
영상 보러 가기 ▶ https://youtu.be/nFaFAPEhBFA
위 영상을 토대로 피그마 백그라운드 이미지에 데이터를 얹은 태블로 대시보드 예시입니다.
디자인 전문가가 아니더라도 퀄리티 높은 대시보드를 제작할 수 있습니다!
위 대시보드는 다음 링크를 참고하세요
https://public.tableau.com/app/profile/seungilkang/viz/2022QartarWorldcupTournament/2022