반응형

전체 글 35

[피그마] 오토 레이아웃 생성 및 해제

오토 레이아웃이란 프레임과 컴포넌트에 활용할 수 있는 속성으로, 크리에 맞춰 늘어나거나 줄어들게 해 줍니다. 또한 내용이 변경됨에 따라 텍스트가 차지하는 공간을 조정하는 등의 기능을 제공해 주어서 사용자가 하나하나 지정하지 않아도 알잘딱깔센으로 디자인을 자연스럽게 변경해 줍니다. 오토 레이아웃을 만드는 방법은 여러 가지가 있습니다. 오른쪽 사이드 바를 활용하셔도 되고 마우스 우클릭, 혹은 단축키를 활용하셔도 됩니다. 가장 편하신 방법으로 실행하시면 될 것 같습니다. 하나 참고하실 것은, 오토 레이아웃으로 묶이면 '프레임'으로 변한다는 것입니다. 가장 간단한 예시인 버튼을 만들어 보겠습니다. 사용하시는 앱이나 웹 서비스를 보시면 보통 버튼의 컬러는 2~3가지 정도 입니다. 모튼 버튼을 하나하나 길이에 따라..

공부/피그마 2023.12.11

[파이썬] numpy, pandas에서의 axis 이해하기

파이썬에서 numpy와 pandas를 공부하다 보면 다차원의 배열을 접하게 되고, 이 과정에서 다양한 함수를 사용하게 되는데요. 이때 axis(축)에 대해서 접하게 됩니다. 다른 분들의 글을 읽어보아도 대다수의 분들이 입문~초보자의 수준에서 공부하게 될 때는, 3차원까지만 알아도 수월하게 공부할 수는 있다고 합니다. 그렇지만, 그래도 공부할 거 이왕이면 중급자는 목표로 해야죠. (혼자 공부하는 데 고수까지는 바라지도 않습니다?) 네, 일단 4차원은 어떻게 그리는지 모르겠어서 3차원 까지만 그렸습니다. 파이썬의 배열은 리스트가 겹겹이 쌓여 중첩된 것입니다. 1차원 배열은 축이 1개, 2차원 배열은 축이 2개, 3차원 배열은 축이 3개입니다. 축은 인덱스와 마찬가지로 1부터 시작하는 게 아니라, 0부터 시작..

[피그마] 텍스트 말줄임(...)기능 Truncate text

말줄임표가 필요한 텍스트에 대해서 직접 ... 을 작성하는 것보다는 훨씬 편리한 기능을 피그마에서 제공해주고있습니다. 물론, 몇 개 안 되는 곳에 작성해야 한다면 직접 작성하는 게 더 편할수도 있습니다 :) 피그마의 텍스트 속성 중 Text truncate라는 속성이 있습니다. Text truncate는 텍스트의 경계(레이어)를 벗어나는 텍스트에 대해서 숨김처리를 하고, 숨김 처리된 텍스트가 있다는 것을 사용자에게 알리기 위해 Text ellipsis=말줄임표(...)를 추가합니다. Truncate text를 적용하기 위한 방법은 무엇일까요? 오른쪽 side bar의 text 영역에서 더 보기(···) 버튼을 누르면 Type settings 패널에 접근할 수 있습니다. 여기서 Basics 탭 최하단에 T..

공부/피그마 2023.11.01

[파이썬] 정적 페이지 스크래핑 해보기 - 광명시 청년동 데이터 수집

크롤링이냐, 스크래핑이냐 해석의 차이이지만 제가 작성한 코드가 차마 크롤링의 수준까지는 가지 못했기 때문에 크롤링보다는 스크래핑이라는 용어를 선택해서 작성하기로 했습니다. 광명시의 청년 정책 및 정보들을 모아서 뉴스레터를 만들어볼까?라는 조그마한 목표를 가지고 있습니다. 근데 냅다 뉴스레터 시작하는 것보다는 블로그를 통해서 소식들을 공유하고, 사람들의 수요가 있을 때 만들어 보는 걸로 하겠습니다. (아무도 안 궁금하신가요?) 광명시에는 '광명시 청년동' 이라는 청년 전용의 공간이 있습니다. (39세? 까지 이용이 가능하다는데 뭐 입장을 통제하는 것도 아니고 누구나 들어가실 순 있겠죠?) 광명시는 나름 청년 친화 도시라고 생각하고 있습니다. 청년동에서는 청년들이 참여할 만한 프로그램들이 있는데요. 이 정보..

공부/스크래핑 2023.10.28

[피그마] Constraints 이해하기

피그마의 Constraints란? 부모 프레임을 변경할 때, 자식 객체가 어떻게 반응해야 할지 결정해 주는 속성이라고 설명할 수 있습니다. 물론, 파고든다면 상당히 심도 깊고 이해를 요하는 기능일 수도 있겠습니다만, 공부해 나가는 입장에서 이해한 내용을 바탕으로 작성해 봅니다. 그림에서 볼 수 있듯이, 초록색을 감싸고 있는 파란색 부분을 Parent라고 합니다. Parent의 크기를 변경할 때 안에 있는 초록색 부분, 즉 children이 어떻게 반응할지 결정하는 것이 Constraints 속성입니다. Constraints에는 크게 가로(Horizontal)와 세로(Vertical)가 있습니다. 1. Horizontal : Left, Right, Left and right, Center, Scale 2...

공부/피그마 2023.10.26

[피그마] 텍스트 리사이징 속성 3가지 이해하기

피그마에는 텍스트 '리사이징'이라는 속성이 3가지 있습니다. 텍스트 리사이징이란, 딱 보기에는 텍스트의 크기를 설정하는 건가? 싶겠지만, 텍스트 레이어를 설정하는 속성입니다. 피그마에서 텍스트를 생성하기 위해 Text 버튼을 누르고 캔버스에 클릭해 보시면, 파란색 테두리의 사각형이 텍스트를 감싸는 것을 보실 수 있습니다. 이것이 텍스트 레이어고, 텍스트 리사이징은 텍스트가 늘어나고 줄어듦에 따라 텍스트 레이어가 작아지거나 커지는 방식을 제어하는 것입니다. 리사이징의 속성에는 3가지가 있습니다. 1. Auto width : 텍스트를 작성하면 그에 따라 자동으로 텍스트 레이어의 가로(width) 길이가 늘어납니다. 2. Auto height : 텍스트를 작성하면 그에 따라 자동으로 텍스트 레이어의 세로(he..

공부/피그마 2023.10.24

[피그마(Figma)] 정렬 기능 사용하기

이렇게 다양한 객체(혹은 레이어)가 있을 때, 정렬을 쉽게 할 수 있는 방법을 피그마는 제공하고 있습니다. ​ 오른쪽 사이드바의 'Design'탭에서 할 수 있는 기능 중 '정렬'에 대해서 정리해 보겠습니다. 해당 기능은 객체를 클릭했을 때 보이므로, 아무것도 클릭하지 않은 상태에서는 보이지 않는 것이 정상입니다. 제일 상단에 있는 이미지를 기준으로 이런저런 정렬을 할 예정이기 때문에, 위의 이미지를 캡처하셔서 어떻게 변하는지 확인하시는 게 볼 때 편할 겁니다. (물론, 중간중간 저도 원본을 보여드리긴 하겠지만요.) 빨간색 표시한 곳의 왼쪽부터 순서대로 Align left Align horizontal centers Align right Align top Align bottom More options 이..

공부/피그마 2023.10.23

[주문/결제] 뒤로 가기 수단을 고려해야 합니다

주니어 기획자로서 주문/결제 부분은 항상 어려운 부분 입니다. 어느 분야에서든 그렇겠지만, 특히 돈이 지불되는 부분인 주문/결제 분야는 주니어가 경험할 기회도 거의 없기 때문에 없기 때문에 더 어렵게 느껴집니다. ​ 오늘 개발자와 얘기를 하다 알게 된 부분을 공유합니다. 서비스를 운영하는 입장에서는 별거 아니라고 생각할 수 있지만, 사용자의 입장에서는 불편함을 느낄 수 있는 부분입니다. 아이폰은 뒤로 가기 버튼이 없습니다. 해당 이슈는 아이폰에서만 발생하는 부분입니다. 안드로이드 기반의 폰인 경우 물리적인 뒤로 가기 버튼이 있기 때문에 해당하지 않는 이슈입니다. 물론 아이폰에서도 앱 간 전환이 되는 경우 좌측 상단에 이전 앱이 보이고, 해당 부분을 클릭하면 다시 이전의 앱으로 돌아갈 수 있습니다. 이렇게..

공부/기획 2023.10.21

[피그마(Figma)] 커서챗 기능 - 팀원들과 간단한 커뮤니케이션

기존에 코멘트 기능으로 소통을 하는 방법에 대해서는 알고 있었는데, 피그마에서 또 다른 소통 방식을 제공하는 것을 이번에 알게 되었습니다. '커서챗'이라는 기능인데요. 코멘트처럼 저장되는 게 아니라, 일정 시간만 노출되고 사라지는 인스턴트 메시지의 성격을 가지고 있습니다. 사용 방법 1. 키보드에서 슬래시(/) 누르기 2. 오른쪽 마우스 클릭 후 'Cursor chat' 선택하기 두 방법 중 하나를 선택해서 커서챗 기능을 활성화하게 되면, 커서 바로 옆에 텍스트를 입력할 수 있는 영역이 호출되고 원하는 텍스트를 입력하게 되면 몇 초동안 유지되었다가 바로 사라집니다. 팀원들과 같은 화면을 보고 있으면서 실시간으로 소통할 때 유용하게 사용할 수 있을 것 같습니다. 내용 초기화 노출되고 있는 커서챗을 지우고 ..

공부/피그마 2023.10.20

[파이썬 Numpy] ndarray 생성하기

Numpy는 같은 종류의 데이터 타입으로 이루어져 있는 다차원 배열 타입인 ndarray를 제공합니다. '같은 종류의 데이터 타입'이라는 것은 한 개의 ndarray 객체 내에서 int와 float가 공존할 수 없다는 뜻입니다. 파이썬의 리스트는 하나의 리스트 객체에 int, float, string 등을 모두 공존할 수 있습니다만, ndarray에서는 허용하지 않습니다. ndarray를 생성하기 위해서 ndarray()라는 함수를 사용할 수도 있습니다만, 권장되지는 않습니다. 실제로 공식 문서에도 ndarray대신 array, zeros 혹은 empty 등의 함수를 사용해서 생성하라고 적혀있습니다. Arrays should be constructed using array, zeros or empty (..

[주간 수 결정법] 주차 별 정기 휴무일 설정 방법 (매월 첫 주 기준)

1. 월요일이 일주일의 시작일까? 일요일이 일주일의 시작일까? 2. 매장의 정기휴무일을 설정할 때, 1주 차~5주 차가 있는데 어떻게 계산할까? ​ 이번 이커머스 구축 프로젝트에서, 매장 정기 휴무일 설정에 대해서 검색하던 도중에 국가 표준이 있다는 것을 알게 되었습니다. 해당 정보를 정리하면서 한 번 더 머리에 새기고 다른 분들께도 공유를 위해 필요한 정보만 작성해 보겠습니다. 국제 표준화 기구인 ISO 8601에 따른 [KS X ISO 8601]에 따르면 1. 국제적 기준에 따라 일주일의 시작은 월요일 2. 새해의 첫 주를 계산하는 기준은 일주일의 절반 이상을 판단하는 기준인 '목요일'을 기준으로 계산한다. 이를 준용하여 첫 목요일을 가지고 있는 달에 그 주간 전체를 속하도록 준용하여 계산한다. 20..

공부/기획 2023.10.18

[피그마(Figma)] 썸네일 지정하는 방법 - 프로젝트 파일 미리보기

프로젝트 내에서 파일 관리할 때 썸네일을 지정해두면 이렇게 굳이 해당 파일을 들어가서 보지 않아도 한 눈에 무슨 내용인지 파악할 수 있어서 편합니다. ​ 피그마 썸네일 설정 방법 1. 썸네일로 지정할 프레임을 만듭니다. 2. 해당 프레임을 썸네일 용도로 사용하기 위해서는 1600x960 사이즈를 권장합니다. (피그마에서 공식적으로 권장하는 사이즈 가이드입니다.) 3. 우측 마우스를 클릭하여 'Set as thumbnail'을 클릭합니다. 4. 선택한 프레임이 아래와 같은 'custom thumbnail' 아이콘으로 변경되는 것을 확인할 수 있습니다. 5. 이미 지정한 썸네일을 되돌리고 싶다면 썸네일로 지정된 프레임을 우클릭하여 'Restore default thumbnail'을 클릭해주시면 됩니다. 이렇..

공부/피그마 2023.10.17

[피그마(Figma)] 검색 및 바꾸기(대치) 기능

1년 전에 피그마를 맛보기로 살펴보았을 때는 없던 기능이 최근에는 생겼더라고요. 최근 이직 준비하면서 공고문에 자주 나와있는 우대/요구사항 중에 하나가 피그마라 다시 공부하고 있는데, 빨간색으로 동그라미 친 부분에 돋보기 아이콘이 생겼습니다. 돋보기 아이콘 클릭 Ctrl + F 단축키 이용 ​ 위의 두 가지 방법 중에 하나를 사용하시면 찾기(검색) 기능을 사용하실 수 있습니다. 찾고자 하는 단어를 입력하면 아래의 그림과 같이 노란색으로 강조되어 표시됩니다. 그리고 검색창의 오른쪽 설정 아이콘을 클릭하면 Replace(대치) 기능도 사용하실 수 있습니다. 'Relplace'를 클릭하면 아래와 같이 기존의 단어를 어떤 단어로 변경할지 입력하는 항목이 활성화됩니다. 또한, 모든 속성(?)에 대해서 figma ..

공부/피그마 2023.10.16

갤럭시탭 S8에서 어플 가로 화면으로 보는 방법 (2023 update)

갤럭시탭 S8+를 소유하고 있습니다. 인스타그램이나, 네이버 블로그 등등 특정 어플리케이션을 들어가면 자동으로 가로화면이 아니라, 세로 화면으로 표시되어서 참 화가 나느 분들 많으시죠? 저도 그렇습니다. 이게 뭐 창을 두 개로 화면분할하면 된다고 하긴 하는데 너무 귀찮아서 그냥 탭으로는 이용을 아예 안했습니다.(극단적) 가로 화면으로 보는 방법 1. [설정] > [유용한기능] > [실험실] 2. [세로 보기 고정 앱에서 가로 보기 지원] 3. 가로로 보고싶은 어플을 검색한 후에 [사용 중]을 활성화하고 설정값을 [앱 기본값] 혹은 [전체 화면]으로 변경해줍니다. ​ 위의 방법으로 하시면 갤럭시 탭에서도 가로 화면으로 볼 수 있습니다~ 앱 기본값과 전체화면의 차이는 아래 사진에서 확인해주세요!

이것저것/잡담 2023.10.15

[파이썬 sklearn] 빅데이터분석기사 1유형 예시 코드 - minmax 스케일링

빅데이터분석기사 실기 시험을 위해 필요한 공부만 하고 정리도 할 겸 올리는 MinMaxScaler. 정확한 정보를 원하시면 공식 문서를 참고하는 게 좋습니다. ​ 응시환경 체험하기 작업형 제1 ,2 유형을 기반으로 정리해 보았습니다. https://www.dataq.or.kr/www/board/view.do?bbsKey=eyJiYnNhdHRyU2VxIjoxLCJiYnNTZXEiOjUwOTM0M30=&boardKind=notice 데이터자격시험 www.dataq.or.kr # Min-Max Scale 방법 1 import pandas as pd from sklearn.preprocessing import MinMaxScaler df = pd.read_csv('data/mtcars.csv', index_co..

[프로그래머스] 숫자의 표현_python(level2)

문제 링크 https://school.programmers.co.kr/learn/courses/30/lessons/12924 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 나의 풀이 def solution(n): answer = 0 # 자연수 이므로 1부터 시작해서 n까지 for start in range(1, n+1): # start가 n과 같다면 굳이 다음 반복문으로 이동하지 않고 break if start == n: answer += 1 break for num in range(start+1, n+1): # start+1 부터 시작해서 start에 ..

[파이썬 sklearn] train_test_split 학습, 테스트 데이터 나누기 (빅데이터분석기사)

빅데이터 분석기사 제2유형을 풀기 위해서는 여러 가지 함수들을 작성해야 하는 데, 그중에 train_test_split()이라는 함수가 있습니다. 사실 단순히 점수를 얻기 위해서는 굳이 할 필요는 없지만 심신의 안정을 얻기 위해서는 이 함수를 이용해서 자체적으로 결과를 한 번 돌려보는 게 마음이 편하기 때문에 어느 정도 공부를 했다면 마무리 단계에서 이 함수를 활용해서 점검하는 걸 추천합니다. ​ 1. 왜 데이터를 나누는가? 학습 데이터를 나누지 않으면 주어진 데이터에 과적합 되어 새로운 데이터가 주어졌을 때 예측한 결과의 오차가 커집니다. ​ 2. 사용 방법 import pandas as pd test = pd.read_csv("data/X_test.csv") train = pd.read_csv("da..

[피그마(Figma)] 텍스트에 링크 삽입 (하이퍼링크)

피그마에서는 텍스트에 링크를 삽입해서 피그마 내부에서 이동하거나, 피그마 외부의 문서(사이트)로 이동할 수 있습니다. 다른 피그마 파일 그리고 프로토타입에도 링크를 걸 수 있는데, 제가 아직 프로토타입까지는 만들어보지 않아서 비교적 간단한 텍스트 링크 삽입만 해보겠습니다. 1. 텍스트에 프레임 링크 삽입 1) 원하는 프레임을 선택하고, 마우스 우측을 클릭합니다. 2) Copy/Paste as > Copy link를 클릭합니다. 3) 복사한 링크를 붙여넣을 텍스트를 클릭하면 상단의 툴바에 링크아이콘('Create link')을 클릭합니다. 4) Type or paste URL이라는 곳에 복사한 프레임의 링크를 붙여 넣습니다. 5) 링크를 붙여 넣으면 위의 사진처럼 밑줄이 그어지며, 마우스를 올려놓게 되면 ..

공부/피그마 2023.10.12

[파이썬 sklearn] 오차행렬(혼동행렬, confusion matrix) 공부하기 - 평가 지표 이해(1)

빅데이터분석기사 실기 제2유형 문제를 보면서 항상 궁금했던 게 있었습니다. '제출한 모델의 성능은 000 평가 지표에 따라 채점한다.' 000에는 ROC-AUC, F-1 Score, 정확도 등 다양한 평가 지표에 따라 채점을 한다고 적혀있다. 그럼 과연 평가 지표는 어떤 기준을 가지고 채점하는 걸까요? 사실 빅데이터분석기사 필기 혹은 비슷하게 adsp를 공부했던 사람들에게는 익숙한 오차(혼동) 행렬인데, 이번 기회에 알아볼 겸 정리해 보기로 했습니다. 오차행렬은 어떠한 유형의 예측 오류가 발생하는지에 따라 TN, FP, FN, TP로 나뉩니다. 귀여운 MBTI 같지 않나요? 1. 오차행렬의 앞 'T/F'는 실제값과 예측값이 동일하면 'T', 다르다면 'F'가 됩니다. 2. 오차행렬의 뒤 'N/P'는 예측..

청주시 행정 구역 지도 무료 다운로드(png, ai, svg 파일)

안녕하세요, 예전에 창업했을 때 카드뉴스를 만들기 위해 제작했던 청주시 행정 구역 다운로드 파일입니다. 청주시 전체, 상당구, 청원구, 흥덕구, 서원구 이렇게 구분되어 있습니다. 파일 형식은 png, ai, svg 파일로 구성되어 있습니다. 다운로드 받으면 파일에 비밀번호가 걸려있는데, 비밀댓글 남겨주시면 제가 답글 남기도록 하겠습니다. 잘 사용하셨으면 좋겠습니다. 감사합니다.

반응형