태블로 완전 정복 3회차 세션 - 손보미 튜터님
[수업 목표]
- 피그마를 활용하여 대시보드를 꾸며봅시다.
- 사용자지정 모양이나 아이콘을 활용해봅시다.
[목차]
- 숫자로 보는 공장, Tableau 완전 정복 수업 일정
- 피그마 살펴보기
- 피그마 디자인하기
- 태블로 꾸미기(with 아이콘)
피그마 살펴보기
피그마란?
현존하는 가장 인기 있는 디자인 툴, 클라우드 기반 디자인 및 프로토타이핑 도구.
UIUX 디자인이나 디자인 시스템 제작, 기획, PPT, 애니메이션, 짤&이모지 만들기 등 무궁무진한 용도로 활용할 수 있는 디자인 툴.
1. 강력한 UI 드로잉
벡터+비트맵+웹 툴입니다
- 강력한 벡터 드로잉 기능을 활용해 자유롭게 그림을 그릴 수 있습니다.
- 웹에 자동저장되고 많은 파일도 빠르게 처리할 수 있습니다.
고품질 UI 컴포넌트를 원툴로 만들 수 있습니다
- 디자인 컴포넌트 :
팀을 위한 온라인 디자인 시스템 소프트웨어 | Figma
- 스마트 애니메이트 기능을 통해, 내가 만든 인터랙션을 라이브러리화 할 수 있습니다.
- 프로토타이핑 및 애니메이션을 체계적으로 활용할 수 있습니다.
원하는 목적에 응용할 수 있습니다
- 비주얼 요소를 빠르게 정의, 결합할 수 있기 때문에 정말 다양하게 활용할 수 있습니다. 프리젠테이션, 애니메이션, 일러스트레이션, 브레인스토밍, 태스크매니징, 이모지, 간단한 게임 제작 등의 목적으로 사용할 수 있습니다.
다양한 플러그인을 쉽게, 바로 사용 가능합니다
- UI사이에 화살표를 그려서 플로우차트를 만들 수 있습니다.
- 무료 이미지를 피그마 안에서 찾아서 바로 활용할 수도 있습니다.
무료입니다
- 프로젝트 기능을 통해 무료로도 수많은 작업자들과 협업해볼 수 있습니다.
- 유료로 제공되는 라이브러리, 팀 기능은 프로젝트와 피그마 숙련도가 고도화된 이후에 활용도가 높습니다.
2. 쉬운 공유
웹 링크로 공유합니다
- 링크 클릭 한 번으로 공유자가 원하는 위치로 사용자를 바로 랜딩시킵니다.
- 디자이너, 기획자, 개발자가 한 프로젝트 파일 안에서 작업할 수 있습니다.
- 지라, 노션 등 다른 서비스에서 임베드 기능을 제공하기 때문에, 다른 협업툴에서도 디자인을 실시간으로 확인할 수 있습니다.
- 버전 기록을 추적할 수 있습니다.
체계적으로 저장할 수 있습니다
- 언제 어디서나, 아무 전자기기(태블릿/폰/컴퓨터 등) 만 있으면 작업을 지속할 수 있습니다.
- 웹에 저장하기 때문에, 버전 관리, 롤백이 정말 쉽습니다.
3. 시스템적 이용
디자인을 체계적으로 복붙할 수 있습니다
- 컴포넌트 기능을 활용하면 반복적인 디자인을 효과적으로 관리할 수 있습니다.
라이브러리를 실시간으로 배포하고, 피드백을 받을 수 있습니다
- 라이브러리의 컴포넌트를 디자이너가 설정한 스타일을 유지한 채, 다양한 방식으로 오버라이드할 수 있습니다.
- 버즈빌 디자인 시스템 사례(Apps) : SDK의 특성을 반영, 브랜드리스한 UI컴포넌트를 제작 및 배포해 외부에서도 시스템 사례를 참고할 수 있도록 했습니다.
자체 플러그인을 개발할 수 있습니다
- 우버 디자인 시스템 사례(Link) : 피그마에서 제공하는 디자인 작업 및 제안에 그치지 않고, 자체 플러그인 개발을 통해, 누구나 자신의 니즈의 맞으면서도 개발 가능한 상태의 우버 UI를 생성할 수 있게 만들었습니다.
API를 제공합니다 (Link)
- 활용 예시 : 디자이너가 피그마 파일에서 아이콘셋이나 스타일을 추가하고 알리면, 해당 피그마 라이브러리를 개발 라이브러리에 동기화시키는 툴을 만들 수도 있습니다.
AI기능으로 더욱 강력해졌습니다.
Figma AI: Figma AI가 열어주는 나만의 창의력
태블로 관련 피그마 자료
3. 피그마 디자인하기
작업 과정
- 주황 컬러: F3A442, F8C481
프레임 크기: 1300 * 950
corner radius : 30
다각형 꾸미기
4. 태블로 꾸미기(with 아이콘)
작업 과정
- 커스텀 도형 사용하기
문서 - 내 Tableau 리포지토리- 모양- 새폴더(QAQC)- 도형 이동
++아이콘 참고자료 유료라 화면 캡쳐해서
Vector Icons and Stickers - PNG, SVG, EPS, PSD and CSS
++이미지 배경 제거 -> 누끼따따따따따따따잇
이미지 배경 제거, 투명 배경 만들기 – remove.bg
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
개인과제(완) - 배추 아니고 토마토였음
내가 이곳저곳 자문구하며 만든 태블로 대시보드
전체 <- 이부분부터 막혔음
1. 대시보드에서 필터 설정하기
-> 워크시트에서 필터를 설정해둔 상태로 대시보드에 옮겨오면 필터가 자동으로 튀어나옴 안튀어 나와도 빼낼 수 있음
그렇게 튀어나온 필터들 제목 없애서 깔끔하게 만들어주고 단일 값, 다중 값 설정
2. 온실이름 필터 따라 바뀌는 문구 삽입하기
-> 새시트를 기준으로 다시 시작
-> 온실이름 차원을 세부 정보로 드래그
-> 필터 추가 ( 바로 필터 추가하려고 하면 측정일-일 이 안나와서 행이나 열에 먼저 올려놓고 필터 추가해야함
-> 마크 다각형으로 바꿔주고 열에 측정일 없애주면 이렇게 되는데 여기서 시트11 더블클릭
-> <시트 이름> 으로 있는걸 ' Smart Farm Monitoring - <온실이름> '으로 바꿔주면 됨
-> 대시보드로 넘어와서 왼쪽 시트란 에 있는 워크시트 드래그해서 대시보드 작업창에 올리면 끝
단, 왼쪽 하단 개체 란에서 '부동' 눌러주고 드래그해야 내가 원하는 크기로 맞춤 가능
3. 빅넘버 넣기
우리 목표는 대시보드에 야그들 넣어주는거임 난 총 4개의 워크시트를 생성해서 만듦
만드는 방식은 똑같으므로 전체 에너지 사용량만 기재하겠음
-> 일단 2.과 똑같이 필터 넣어주고 '전체 에너지 사용량' 측정값을 마크의 세부정보에 드래그
-> 마크 란에 텍스트 -> 텍스트 편집
-> 이녀석을
-> 이렇게 바꿔주고 대시보드에다가 똑같이 드래그해서 올리면 끄읕
4. 일자별 생장현황은 쉬우니까 패스
5. 일자별 에너지 사용량 트리맵
이게 완성품인데 여러가지 섞어서 매우 골치 아팠음
특히 트리맵 안나와서 머리 꼭지 돌았음
잘해보자
->시트 하나를 새로 만들고 워크시트 제목을 '일자별 에너지사용량(L)' 로 만든다
-> '측정값' 이라는 측정값을 마크카드 크기에 드래그한다
-> '측정값' 이 여러개 있는데 필요한 co2사용량,물사용량,비료사용량만 냅둔다
-> 아 필터도 추가해준다 (측정일-일 , 온실이름)
-> '측정값 이름' 차원을 테이블에서 마크카드 레이블로 드래그
-> '측정값' 측정값을 테이블에서 마크카드 레이블로 드래그
이러면 요따구로 나옴
-> '측정값 이름' 차원을 테이블에서 마크카드 색상으로 드래그
요따구로 변경됨
그 이후에 CO2사용량(L) 만 거멓게 나오니까 그거 레이블 -> 레이블 편집 들어가서 폰트 키우고 글자 색 흰색으로 지정하고 워크시트 서식 들어가서 테두리 흰색으로 굵게 설정하면 구분 잘됨
5. 전체 에너지사용량 대비 열매 수
이건 쉬웠으니 패스
6. 지역별 총 생산량(kg)
맵 생성해야 하는데 데이터 셋상 시군구 코드 밖에 없음
추가로 가져와야함
데이터 원본 으로 들어가면 현재 태블로_소스.csv 만 있음
-> + 누르고 suwon.zip 파일 추가해주기
-> 연결 란에 suwon 을 클릭하면 테이블 suwon 이 나오는데 테이블 수원을 드래그 해서
오른쪽 tableau_source.csv 에 연결하기
-> 연결하면 오른쪽 하단에 이런 창이 뜨는데
태블로_소스 필드 선택 -> '시군구코드' , 수원 필드 선택 -> Sig Cd 클릭
필드 선택이 끝나면 데이터가 정상적으로 연결된거임
-> 새 워크 시트 만들고 기하 도형 워크시트에 드래그
시군구코드에 따른 맵이 표현됨
-> '시군구코드' 차원을 마크카드 색상에 드래그
-> '총 생산량'측정값을 맵 위에 드래그
-> '총 생산량' 측정값을 마크카드 레이블에 드래그
하면 요따구로 나옴
여기서 세세한건 알아서 하자 ㅇㅇ 가능하잖아 이제?
마지막으론 대시보드에 만든것들 이쁘게 드래그하면 끝남
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
코드카타
코딩테스트 연습 - 명예의 전당 (1) | 프로그래머스 스쿨
해석
1. k값 의 일 수 까지는 그냥 최솟값만 도출하면 됨
-> if k >= i :
answer += min(score[0:i])
else:
answer +=
1일차는 무조건 명예의 전당에 올라가는데 인덱싱 [0:0] 해도 괜찮음
ㅇㅇ 괜찮음
2. 이번에도 for문을 쓰는데 if 문으로 나눠갈거임
3. 근데 k일차 이후 부터는 최솟값이 갱신되니 마지막 return 값은 새로운 return 변수를 만들어서 최솟값으로 넣어줘야함
4.
원하는 출력값이 안나옴
[10, 10, 10, 20, 20, 100, 100]
인덱싱 새로함 역순으로 빼면 되는거라 ㅇㅋ
코드 실행 성공
채점에서 절반 이상 틀림
왜지?
-> 그냥 print 빼면 되는 거였음
이것도 가능
sorted(answer)[-1:-k-1:-1]
-> sorted(answer)[-k:]
def solution(k, score):
answer = []
result = []
for i in range(len(score)):
if k > i:
answer.append(score[i])
result.append(min(answer))
else: # k <= i:
answer.append(score[i])
result.append(min(sorted(answer)[-k:]))
return result
튜터님 조언
1. 이제 for 문을 쓰는데 익숙해졌으니 리스트 컴프리헨션, 람다함수를 이용해보자
2. 많이 어렵다고 포기하지 말고 처음엔 AI 도움 받아서 작성해보자
3. 혼자 풀었는데 잘했다함 나이스
날짜 구하는 함수가 있음
import datetime
day1 = datetime.date(2016, 1, 1)
day2 = datetime.date(2016, a, b)
diff = day2 - day1
-> diff 일자로 출력됨
긍게 이런거 아닐까?
import datetime
weekday_ab = {0:'MON',1:'TUE',2:'WED',3:'THU',4:'FRI',5:'SAT',6:'SUN'}
day1 = datetime.date(2016, 1, 1)
if day1.weekday() = 4:
return weekday_ab[day2.weekday()]
캬~~~~~~~~~~~~~~~~ 1방 승리
gpt 한테 좀 더 좋은 코드 자문 구함
-> 딱히 개선할만한 껀덕지가 없음
ㅅㅅㅅㅅㅅㅅㅅㅅ
다른 사람 풀이 (1) - 웃자 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
def getDayName(a,b):
answer = ""
if a>=2:
b+=31
if a>=3:
b+=29#2월
if a>=4:
b+=31#3월
if a>=5:
b+=30#4월
if a>=6:
b+=31#5월
if a>=7:
b+=30#6월
if a>=8:
b+=31#7월
if a>=9:
b+=31#8월
if a>=10:
b+=30#9월
if a>=11:
b+=31#10월
if a==12:
b+=30#11월
b=b%7
if b==1:answer="FRI"
elif b==2:answer="SAT"
elif b==3:answer="SUN"
elif b==4:answer="MON"
elif b==5:answer="TUE"
elif b==6:answer="WED"
else:answer="THU"
return answer
print(getDayName(5,24))
'본 캠프 TIL' 카테고리의 다른 글
| 2월 25일 TIL 팀 프로젝트 발제, 코드카타 (0) | 2025.02.25 |
|---|---|
| 2월24일 TIL Streamlit 1회차, 코드카타, 태블로 웹 오류 날 때 (0) | 2025.02.24 |
| 2월 20일 TIL 개인과제, 코드카타 (0) | 2025.02.20 |
| 2월 19일 TIL 코드카타 , Tableau 완전 정복 2회차 (0) | 2025.02.19 |
| 2월19일 TIL 코드카타 (0) | 2025.02.18 |