본문 바로가기
  • 나의 작은 기록이 도움이 될 수 있기를

하루하루789

피그마 인터렉션 배워보기 피그마 책을 보고 공부한지 벌써 한달은 된것 같은데 이제서야 인터렉션으로 들어왔다. 물론 매일 조금씩 하다보니 늦어지긴 했지만 그래도 드디어! 복잡해 보이지만 어떤 버튼을 눌렀을때 어디로 이동하는지를 보여주는 선들이다. 인터랙션을 적용할때 interaction details 에서 다 조정을 하는데 여기에 나와 있는 기본적인 값들로도 충분히 원하는걸 표현할 수 있는것 같다. (아직까지 아는게 별로 없어서) 멋진 프로그램이다. 지금까지는 그냥 책을 보고 따라만 하는 수준이라 직접 페이지를 기획해보고 만드는건 또 엄청 시행착오가 필요하겠지 그래도 책을 몇번 보고 여러번 계속 따라하다보면 더 나아지겠지. + 결국 중요한건 디테일이다! 디테일에서 명품과 아닌것의 차이가 드러난다. 그거 괜찮아 보이는것과 자세히 들.. 2021. 3. 17.
카카오 이모티콘 구독 서비스 시작했다! 이모티콘 플러스 카카오톡에서 이모티콘 구독서비스인 이모티콘 플러스를 시작했네! 오픈기념으로 한달 무료사용할 수 있다고 해서 써보는 중! :) 좋다! 이제는 이모티콘 구독까지! 구독서비스는 어디까지 발전할것인가? 기대된다. 지금도 엄청 많은 이모티콘이 이미 카카오샵에서 판매중인데 좋아하는 이모티콘이 있다면 쓰고 싶은 이모티콘을 마음대로 골라서 사용할 수 있겠지만 어떻게 찾아서 뭘 써야할지 고민되는 사람도 걱정없이 카카오에서 알아서 추천을 해준다! 내가 입력하는 텍스트에 맞게 여러가지 상황에 맞는 이모티콘들을 전부 보여주니까! 끝내준다! 이렇게 내가 쓰는 단어중 이모티콘에 등록된 단어가 있으면 오른쪽에 이모티콘이 뜨는데 저걸 터치하면 아래쪽에 추천해주는 이모티콘 목록들이 뜬다. 랜덤 이모티콘을 누르면 상단에 랜덤으로 하나씩.. 2021. 3. 17.
인디자인 짝수페이지로 시작하는 방법과 페이지 고정하는 방법 인디자인에서 스프레드로 새로운 문서를 만들면 오른쪽의 1페이지의 낱장이 먼저 생성이 되고 그 뒤로 부터 스프레드 페이지가 만들어진다. 책을 만들때는 상관없지만 다른용도로 쓸때는 불편할때가 많다. 먼저 제일 간편한 방법으로 페이지 패널에서 1페이지를 클릭해서 선택한 후에 [레이아웃]-[번호 매기기 및 섹션 옵션] 으로 들어가면 위와 같은 팝업창이 뜨는데 위쪽 시작 섹션에 있는 '페이지 번호 매기기 시작을 2로 변경을 하면 홀수쪽으로 시작하는 페이지가 짝수로 스프레드 페이지로 변경이 된다. 그리고 또 다른 방법은 만들어 놓은 페이지를 모두 선택한 뒤 페이지 패널옵션 창에서 '선택한 스프레드 재편성 허용'을 체크 해지 한다. (기본 옵션은 체크되어 있다.) 체크해지를 한 다음에 1페이만 다시 선택한 뒤 지우면.. 2021. 3. 16.
인디자인 문서 페이지 추가 하는 여러가지 방법 인디자인을 사용하면서 페이지를 추가할 때 그때그때 페이지 패널에서 아래쪽에 있는 아이콘으로 한페이지씩 추가하거나 페이지를 만들고 중간중간 페이지를 넣어두거나 하는데 새로운 방법을 하나 알게되어서 기록 인디자인 메뉴 [파일]-[페이지설정]으로 들어가면 아래와 같은 화면이 나온다. (단축키 cmd+opt+P) 상단에 '페이지 수'라고 나와있는데 이곳에 나와있는 숫자는 현재 만들어져 있져 있는 페이지수가 표시된다. 여기에서 페이지수를 변경해서 입력을 하면 현재 페이지의 마지막 페이지 다음위치에 페이지가 추가 된다. 한꺼번에 많은 페이지를 추가해야 할때 유용하게 이용할 수 있을 것 같다. 이건 페이지 패널에서 마우스 우클릭을 하면 나오는 팝업창 여기서는 좀 더 디테일하게 페이지를 추가해 줄 수 있다. + 자주 .. 2021. 3. 15.
인디자인 눈금자 안내선 관련 팁 레이어를 더블클릭해서 레이어 옵션이 나오면 '안내선 표시'를 체크 해지 해서 레이어 별로 안내선을 안보이게 할 수도 있다. cmd+ ; 안내선 보기 단축키 cmd+opt+G: 만들어 놓은 안내선을 모두 선택. 안내선을 선택한 뒤 shift를 누른채 드래그 하면 눈금자에 스냅되면서 이동된다. cmd를 누른채 안내선을 가져오면 스프레드 안내선으로 유지된다. 눈금자에서 마우스 우클릭을 하면 '스프레드의 모든 안내선 삭제'를 선택해 안내선을 모두 삭제 할 수 있다. 안내선에도 정말 다양한 옵션들이 있구만! 배워야 할껀 차고 넘친다~ + 재미있게 할것! 2021. 3. 12.
figma 프로토타이핑 prototyping 정적인 화면을 실제 구현한 것처럼 작동시켜 볼 수 있도록 인터랙션을 더하는 작업입니다. digital product 웹이나 모바일 앱처럼 디지털 인터페이스를 통해 상호작용하는 소프트웨어를 말합니다. 2021. 3. 12.
인디자인 크기가 다른 글자 정렬하는 방법 그리고 눈금자 안내선 인디자인을 작업하다 보면 텍스트의 크기가 달라서 정렬이 맞지않아 큰문자와 작은문자의 정렬이 기본설정인 가운데 정렬로 되어있을때가 많다. 그럴때 문자를 정렬하는 방법. 위 사진처럼 큰 문자와 작은 문자가 아래쪽을 기준으로 정렬되어 있다. 몇가지의 옵션이 있는데 위의 이미지는 '전각 상자 아래쪽/위쪽'으로 선택했을 때 표시되는 형태. 정렬값의 옵션은 총 6가지가 있다. 자신이 원하는 방향으로 정렬을 하면 되겠다. 혹시나 여기에 나오는 정렬값과 다르게 더 디테일하게 조정을 하고 싶다면 문자 패널의 기준선 이동기능으로 정확하게 조절을 해서 쓰면 된다. cmd 키를 누른채로 안내선 원점을 드레그 할 경우 가로 세로 안내선이 동시에 생긴다! 이건 꿀팁이다! 다른 프로그램에도 다 되는줄 알았는데 일러스트에서는 되고 .. 2021. 3. 10.
에어팟 프로 애플케어플러스 가입하는 방법 및 제품시리얼 코드 확인 에어팟 1세대를 사용하다가 베터리 한쪽 에어팟이 뭔가 문제가 생긴건지 다른 한쪽에 비해 너무 급격히 베터리가 닳아버려서.. 다음에 에어팟프로를 구매하면 애플케어플러스에 가입해야지 했는데 오늘 가입을 했다. 나는 에어팟프로를 제품을 쿠팡으로 구매했는데 이런 경우 애플 사이트에 내 제품구매일이 등록이 안되기 때문에 애플 사이트에 제품 구매일을 등록을 해야하는걸로 안다. 그런데 애플케어플러스 가입할때는 굳이 필요가 없더라. 우선 애플케어플러스를 가입하려면 전화로 신청을 해야 한다. 쿠팡에서 구매를 할때 애플케어플러스를 바로 같이 구매할 수 있는 옵션도 있었는데 나는 구매 후 60일 이내 가입을 하려고 그냥 제품만 구매를 했는데 그냥 그때 구매 할껄 그랬다! 애플케어플러스는 구매일로 부터 1년을 더 연장해주는 .. 2021. 3. 4.
figma로 페이지 디자인해보기 고객의 행동을 촉발하는 콜투액션(call to action)버튼. Q. 프레임에 넣은 이미지의 위치를 수정하는 방법은 없나?? Q. 텍스트 상자의 크기를 조정할때 텍스트 크기도 같이 조정되는 방법은 없나?? Q. 오브젝트를 선택하고 움직일때 치수를 나오게 어떻게 하나?? 오버뷰 섹션은 이 서비스가 어떤 서비스인지 가볍게 알려주는 공간이다. Q. 문자 간격을 디테일하게 조정할 수 있는 '단락'설정 탭은 없나?? 플러그인으로 받아야 하는건지? Q. auto height는 어떻게 적용하나?? 이건 옆에 속성 패널에 아이콘을 클릭하면 되는거였음. Q. 처음 만들었던 가이드를 안보이게 할려면 어떻게 해야 하나?? 프레임이 컴포넌트가 되면 프레임안으로 더 이상 이미지 레이어 복사, 붙여넣기가 되지 않습니다. 오토 .. 2021. 3. 4.
figma style 설정하는 법 배우기 figma도 사용한 서체를 인디자인처럼 스타일로 정의할 수가 있다. Text에서 저 4개의 점을 클릭하면 스타일 지정할 수 있는 창이 열린다. '+'버튼을 클릭해 스타일을 지정한다. 스타일명을 / 슬래시로 구분 지어 폴더역할을 하게 되면 스타일목록에서 분리되어 보인다. !! 대소문자 구분을 하기 때문에 폴더별로 구분해서 확인할려면 대소문자까지 신경써서 스타일명을 정해줘야 한다. 피그마 스타일에는 내가 만든 스타일에 관해 설명글도 적을 수 있다. 주석같은 기능을 쓸 수 있게 만든건 진짜 괜찮네 인디자인에는 없는.. 우측 상단에 있는 연결고리를 끊어버리면 된다. 브레이크포인트(breakpoint)를 이용하면 접속하는 디바이스에 따라 컬럼 개수를 다르게 보여지도록 설정할 수 있다. 콘텐츠 영역의 최대 너비와 .. 2021. 3. 3.
Figma 레이아웃 그리드 배워보기 웹사이트를 디자인할 때는 보편적으로 12, 14, 16 컬럼이 쓰인다고 한다. offset은 컬럼이 시작되는 시점을 말한다. 마진값을 설정하고 gutter 값을 0으로 설정하면 위에 사진처럼 붉은 라인이 생기는구나! 오늘도 하나 배웠네! :) 2021. 2. 25.
Figma layout 컨스트레인트 기능(constraint) constraint: 제약(이 되는 것), 제한, 통제 로그인 화면은 서비스 첫인상에 크게 영향을 주기 때문에 디바이스별로 어떻게 레이아웃을 구성할지 많은 고민이 필요합니다. 컨스트레인트는 적용할 요소가 프레임 안에 들어가 있어야 하므로, 프레임을 선택해 컨스트레인트를 적용해 주세요. 옵션 left&right 는 양쪽으로 늘리고 줄어드는 옵션이다. 컨스트레인트를 무시하고 프레임 크기를 줄이려면 cmd를 누른 채 줄이면 된다. 컨스트레인트 기능을 설정하고 프레임 크기를 변경해보면 자동으로 어떻게 표시되는지 바로 바로 확인할 수 있다! 멋지네! 애플 워치도 있다! 이거 빨리 뭔가 웹페이지를 만들어서 각자의 디바이스에 맞게 변하는 레이아웃을 만들어보면 재미있겠다! 옛날에는 브라우저마다 기능이 올바르게 작동하는.. 2021. 2. 24.

티스토리툴바