경험기록

John Rieben 미국 그래픽 디자이너 존 라이벤의 포스터를 p5.js로 따라 그려보았다. function setup() { createCanvas(400, 550); } function draw() { background(3, 55, 140); noStroke(); fill(158, 142, 35); rect(0,0, 200,100); fill(224, 18, 18); rect(300,0,100,200); rect(0, 200, 100, 200); fill(158, 142, 35); rect(200, 300, 200,100); fill(255); rect(0,400,400,550); fill(0); textAlign(LEFT); text('museum of science and industry', ..

오늘은 파이썬으로 드디어 실용적으로 쓰일만한 기능을 배웠다..! 그래프 그리기인데 생각보다 어렵지 않다. 물론 단순한 데이터로 해서 쉽게 느껴진 것일 수도 있는 것 같다.. ㅋㅋ 1. 모듈 불러오기 파이썬을 이용한 데이터 시각화를 하려면 matplotlib 라는 그림을 그리는 모듈을 불러와야 한다. %matplotlib inline %config InlineBackend.figure_format = 'retina' import matplotlib.pyplot as plt 이렇게 작성해주면 그래프를 그릴 준비가 완료된다. 중간에 config는 그래프의 그래픽 퀄리티를 높여주기 위함이다. 필수로 들어가야 하는 건 아니다. 2. 그래프 그리기 그래프에 들어가는 데이터는 리스트 형태로 작성해준다. 데이터 양이 ..

Numpy는 Numerical Python 의 약자이다. 일반 파이썬 함수의 연산속도 보다 빠르고 효율적임. 파이썬의 모듈중하나라고 알고 있으면 된다. Numpy모듈을 불러오려면 import numpy as np 라고 적어주면 된다. numpy는 모듈명이고, np는 닉네임이라고보면 된다. 배열(Array) 는 1차원, 2차원, 3차원까지 있다. 데이터사이언스에서는 주로 3차원 배열이 많이 쓰인다고 한다. 1차원 배열의 생성: x = np.array( [1, 2, 3] ) print (x) #[1, 2, 3] type(x) #numpy.ndarray (ndarray 객체) 배열관리 .shape (행,열의 순서로 표시) 차원의 구조를볼 때 사용. .ndim (차원수) .dtype : 배열에 저장된 자료의 타..

파이썬 공부 시작은 8월부터 스파르타코딩클럽을 통해 했다. 국비지원이되서 일정기간까지 동영상 진도율만 완성되면 추후 수업료 100% 환급, 평생소장까지 되어 신청 하지 않을 이유가 없었다! 근데, 완전 쌩초보여서 조금 커리큘럼이 어렵게 느껴지긴 했지만 너무 이론에 기초하지 않고 예제 위주로 하는 것 같아 기본기를 쌓고 다시 돌아와서 보기로.. 9월 말이 되었는데 아직 스파르타코딩클럽의 영상들을 거의 시작을 못했다. 수업에서도 파이썬을 하고 있기 때문에 조금 익숙해진 건 있지만, 배우면 까먹고 또 까먹고 하는 것 같다.. 30대에 공부하는게 이렇게 힘든것이로구나 ㅠ... 미국으로 건너가 석사 입학 준비를 하는 친구도 파이썬을 독학하고 있다길래 조금 위안이 되었다. 나도 열공하고 할 수 있다는 자세, 그냥 ..

안녕하세요! 요즘 굉장히 좋은 생산성 도구들이 정말 많죠? 저는 노션, 피그잼, 미로등을 자주 이용하는데요, 아무래도 디자인에 관심이 많다보니 이미지를 볼 일이 많아요! 노션이나 미로는 이미지 중심적 서비스는 아니다보니 텍스트나 자료 위주로 정리하거나 협업할 때 많이 쓰게 되는 것 같구요, 이제까지 이미지 저장 툴로는 제 최애 서비스 중 하나인 핀터레스트 보드로 좋아하는 이미지를 저장해왔지만 보드에 한번 저장해놓으면 또 다시 찾아보지 않게되더라구요..정리안된 책상 서랍에 묻어두는 느낌이랄까..? 많은 분들이 공감하시겠지만, 비슷한 핀터레스트 보드 주제가 점점 여러개 생기면서 이젠 어떤 이미지를 어떤 보드에 저장했는지 모를 정도인 거 같아요 ㅠ 보드 네임 체계도 직접 만들지 않으면 기억도 안나고.. 한번 ..

3D 모델링 한 것을 투명 배경의 이미지로 저장해야하는 경우가 많다. 근데 블렌더를 처음 이용하면서 이미지를 저장하려고 할때 투명 배경으로 저장하는 옵션이 보이지 않았다. 기본값으로 저장하면 배경이 진회색으로 저장된다. 간단한 설정 하나만 바꿔주면 투명배경 PNG로 이미지를 export 할 수 있다. 블렌더 3D 모델링 한 결과물을 이미지 파일로 저장하고 SNS 같은 곳에 올리거나 할 때 꼭 알아둬야할 기능이다! 1. 원하는 각도로 이미지를 출력하기 위해 Viewpoint 조정 모델링 작업이 완료됬을 때 원하는 각도로 이미지가 렌더링 되기 위해 먼저 뷰포인트 설정 부터 해줘야한다. (이미 아시는 분들은 2번으로 넘어가주시면 됩니다 :-) 카메라 뷰로 가는 키보드 쇼트컷은 Numpad 0 이다. Numpa..

애프터이펙트가 여러모로 쓰일일이 많아서 배우기시작! 모션 그래픽을 예전부터 배워보고 싶었다! 온라인강의랑 유튜브로 간단한 모션 그래픽을 배워보려한다. 오늘은 모션을 넣어줄 Ai파일을 불러오고 키프레임을 넣어서 움직여보는 간단한 모션을 만들어보았다. 예제파일을 불러온다. Ctrl + I 를 눌러 File을 import 해준다. 임포트 할 때 Import as 'Footage' 가 아닌 Composition - Retain Layer Size를 꼭 선택해준다! 'Create Composition' 에 체크 해주고 import한다. Sky-1 Compostion을 더블클릭해주면 애니메이션 창에 일러스트 이미지가 뜬다. 하늘 BG는 락을 걸어줌. 처음 시작할 때 비행기의 위치를 잡아준다. Airoplane Re..

UI 디자인에 있어서 애니메이션과 모션 요소는 디지털 서비스의 사용성에 영향을 미치기 때문에 중요하다. 같은 기능을 하는 동작이어도 어떤 모션이 적용됬느냐에 따라 느낌이 달라진다. 자연스러운 동작은 주로 시작과 끝 지점까지 동일한 속도로 선형적이지 않고, 보통은 훅 들어와서 속도가 차차 느려지거나, 천천히 시작해서 갑자기 빨라지거나 한다. 우리 뇌는 자연스러운 동작에 더 편안한 감정을 느낀다. 실제로 공이 바닥에 떨어질 때, 바운스되는 동작 없이 그냥 바닥에 닿자마자 동작이 뚝 끊기면 뭔가 오싹할것 같지 않은가? 굉장히 부자연스럽게 느껴질 것이다. 그래서 디지털 환경에서의 가시적 인터랙션도 사람이 가장 자연스럽게 느끼도록 해주는 모션이 중요하다. Easing 은 모션에 자연스러움을 더해주는 애니메이션 개..

아이폰 키보드에 몰랐던 기능이 있었다. 은근히 유용한 기능인데 전혀 몰랐다. 아는 사람들만 아는 그런 기능일 것 같긴한데 키보드로 텍스트를 입력하다가 '스페이스' 바를 길게 눌러보자. 계속 스페이스바를 누르고 있으면 위 스크린샷 처럼 키보드 자판 라벨이 사라진다. 그리고 스페이스바를 누른 엄지 손가락을 좌우로 움직여보자. 그러면 커서가 자유롭게 이동한다. 엄청 매끄럽게 이동되기 때문에 텍스트 입력하다 오타가 나면 빠르게 원하는 위치에 커서를 가져다 놓을 수 있다! 보통 입력하다 수정할 때 손가락으로 이미 입력된 텍스트를 눌러서 선택하거나 커서를 놓았었는데, 나 같은 경우는 그럴때마다 한번에 잘되지 않고 두번이상은 해야 커서가 잘 조절됬던것 같다. 완전 신기하다! ㅋㅋ 오타 많은 사람들에겐 은근 유용한 기..

튜토리얼 아님 주의. (유니티 쌩초보여서 아직 튜토리얼 포스팅을 하기엔 한~참 갈길이 머네요 ㅎㅎ) --------------------------------------------- Brackeys의 기초 유니티 강의를 1주일이 넘도록 10편짜리를 못 끝내고 있다.. ㅠ... 아무리 기초여도 코딩이 익숙하지 않다보니 머릿속에 진짜 안박힌다 ㅎㅎ 오늘은 GameManager 을 통해 게임오버시 게임을 다시 reload하는 기능을 만들어보는 튜토리얼을 들었다. 일단 GameManager라는 이름의 empty object를 추가해주고, 스크립트 컴포넌트를 추가해준다. 게임매니저의 역할은 게임의 상태를 바꿔주고, 게임을 시작하거나 끝내고, 리스타트하게 하거나 UI 를 디스플레이한다거나 메뉴간 이동시에도 쓰인다...