소이정이 자체 기획한 뉴스레터 콘텐츠로 실무 노하우, 마케팅/디자인 트렌드 등의 유용한 정보를 전합니다.

어도비 XD 알아보기

안녕하세요, 소이정입니다. 요즘 UI/UX에서 유용하게 쓰이고 있는 XD에 관해 알아보려고 합니다.웹 기획자들을 위한 툴에 관해서 소개했을 때도 포함되어 있던 프로그램 중이기도 하죠! 뿐만 아니라 디자이너들도 유용하게 사용하고 있는데요.무엇보다 어도비 계열이다 보니 포토샵과 일러스트를속해서 사용하던 분들에겐 익숙할 것 같기도 해요.그럼 어도비 XD가 무엇인지, 기능은 무엇이 있는지, 프로그램의 기본적인 화면구성은어떻게 되어있는지까지! 함께 알아보시죠! 어도비 XD란? 어도비에서 출시된 소프트웨어 중 하나로 웹사이트와 모바일 앱, 애니메이션 게임 등 다양한 디자인 작업이 가능합니다. 와이어 프레임과 프로토 타이핑 제작이 가능하며, 하나의 링크를 통해 기획자, 디자이너, 개발자 등 프로젝트에 참여하는 모두가 동일한 페이지에서 공유하고 수정할 수 있다는 점이 제일 큰 장점입니다. 어도비 XD 기능 1. 사용자 경험 디자인을 빠르게 진행할 수 있음 이미지를 포토샵에서 열어 편집할 수 있고, 이미지가 편집되면 자동으로 업데이트 됩니다. 2. 인터랙티브요소, 모션, 애니메이션 적용하여 프로토타입 제작 가능 앱과 웹을 사용하는 흐름과 스타일을 사용자에게 전달할 수 있고 애니메이션도 적용하여 사용자가 직접적으로 경험할 수 있는 프로토타입을 제작할 수 있습니다. 3. 협업이 가능함 프로젝트에 참여하는 모든 팀원이 한 번에 동일한 XD 파일로 작업을 할 수 있으며, 전체적인 작업 과정을 확인할 수 있습니다. 웹페이지로도 내보내기가 가능해 피드백을 받기에도 용이합니다. 4. 다양한 플러그인 활용 가능 개발자 커뮤니티에서 만든 플

포토샵 흐린 이미지 선명하게 만들기

안녕하세요, 소이정입니다. 오늘은 포토샵을 이용해 흐린 이미지를 선명하게 만드는 방법을 소개해 드리려고 합니다.멋진 배경이나 인물을 찍었는데, 막상 보니 흐리거나뿌옇게 되어 있어 사진의 결과물이 마음에 들지 않을 때도 있지 않으신가요?저도 급해서 빨리빨리 찍다가 멋진 하늘을 이상하게 찍은 적이 많은데요....ㅠㅠ예시로 쓰일 사진도,, 바로 그런 사진인데요..!BEFORE & AFTER 먼저 보여드리고 본격적으로 시작해 볼게요.왼쪽이 BEFORE, 오른쪽이 AFTER입니다. 0. 포토샵 실행하고 사진 열기 포토샵을 실행한 후 보정할 사진을 열어줍니다. 사진을 열어주는 방법은 동그라미 안에 있는 열기 버튼을 통해 사진이 있는 경로를 클릭하여 사진을 가져와도 되고, 아래 화살표 영역으로 이미지를 끌고 와도 됩니다. 1-1. 원본 사진 복사하기 보정할 사진을 복사해 줍니다. 단축키를 이용해도 되고, 아래에 있는 아이콘을 이용해도 되는데요! 단축키를 사용할 경우 해당 사진 레이어를 클릭한 후 Ctrl + J를 해주면 됩니다. 아래의 아이콘을 이용할 경우에는 사진 레이어를 아이콘으로 드래그&드롭해 줍니다! 1-2. 필터 씌우기 레이어를 복사한 후 필터를 씌워줄 건데요. 상단에 있는 메뉴 필터를 클릭한 후 기타 - 하이패스를 클릭합니다. 해당 필터는 이미지의 바깥 경계선 자리를 찾아 좀 더 선명하게 해주는 옵션입니다. 흐릿한 사진뿐만 아니라 사진의 컬러를 선명하게 하고 싶을 때도 사용하기도 합니다. 클릭하면 하나의 설정 창이 나타나는데요. 아래 반경에서 수치를 원하는 대로 조정한 후 확인 버튼을 눌러

일러스트 가위툴, 나이프 툴 사용하기

안녕하세요, 소이정입니다. 오늘은 일러스트에서 유용하게 사용되고 있는 툴을 소개해 드리려고 합니다.바로 가위툴과 나이프 툴인데요!주로 도형을 원하는 모양으로 분할하거나 지울 때 사용되는 툴들입니다.해당 기능을 사용하면 손쉽게 원하는 모양으로 만들 수 있답니다~!마지막엔 가위툴과 나이프 툴의 차이점까지 알아보도록 하겠습니다.그럼 일러스트를 실행해 볼까요!? 0. 일러스트 실행 후 새 파일 클릭 제일 먼저 일러스트를 실행해 주세요. 저는 일러스트 2024버전을 사용했습니다. 일러스트가 켜졌다면 왼쪽 상단에 있는 새 파일을 눌러주세요. 1. 파일 이름 설정 및 대지 크기 지정 사전에 설정할 수 있는 세부 정보인 파일 이름과 대지의 사이즈를 조절해 줍니다. 그리고 만들기를 눌러주세요. 저는 오늘 다루는 툴들로 파일 이름을 설정하고 사이즈는 A4 사이즈로 맞추어볼게요. 여러분은 해당 파일의 이름과 대지 크기는 자유롭게 해주세요. 툴을 다루는 연습을 진행하는 거니까요! 2. 도형 그리기 다음은 도형을 그려줍니다. 그려준 도형은 가위툴과 나이프 툴을 이용해서 분할할 때 사용할 예정입니다. 저는 별 모양을 그려보았는데요. 여러분은 직사각형이든 원이든 원하는 걸로 그려주세요. 가위툴 3. 가위툴 선택하기 다음은 왼쪽 툴바에서 가위툴을 찾아볼게요! 지우개 아이콘에 마우스 커서를 갖다 대고 왼쪽 마우스 버튼을 누르면 가위 도구가 나오는데요. 클릭해 주시면 됩니다. 가위툴은 도형을 가위로 자르듯 개체를 분할할 때 사용됩니다. 이후 나이프 툴도 해당 영역에서 선택해야 하니 기억해두시면 좋겠습니다. 4. 패스 선 클릭하여 이어주기 도

일러스트 아트보드 알아보기

안녕하세요. 소이정입니다. 오늘은 어도비 일러스트레이션의 유용한 기능 중 하나인아트보드에 대해 다뤄보겠습니다.아트보드는 한글판으로는 대지라고 번역되어 있는데요.간단하게 작업 공간이라고 생각하면이해하기 편하실 것 같아요.아트보드의 개념과 함께 저장하는 방법까지 한 번 알아볼까요? 아트보드(=대지)란? 일러스트 내에서 우리가 작업한 부분이 보이는 공간인데요. 그림을 그릴 때 사용하는 도화지라고 보시면 됩니다. 0. 일러스트 실행 후 작업환경 설정하기 일러스트를 실행시킨 후 새로 만들기를 클릭합니다. 원하는 사이즈로 설정을 해줍니다. 모바일, 웹, 인쇄 등 상용화되어있는 사이즈의 화면도 제공하니 필요에 따라 사용하시면 됩니다.저는 오늘 아트보드에 관한 설명을 위한 것이니 임의로 사이즈를 정해서 제작해 볼게요! ① 임시로 파일 이름을 지정하고, ②사이즈만 변경하고 제작 버튼 누르기는 잠시 기다려주세요. 1. 아트보드 개수 지정하기 제작 버튼을 기다려달라고 한 이유는 아트보드의 수를 지정하기 위함인데요! 해당 영역에서 한 개의 아트보드만 필요하면 1개만, 다양한 개수의 아트보드가 필요하면 원하는 만큼 숫자를 입력해 주시면 됩니다. 저는 오늘 10개를 예시로 제작해 볼게요!아트보드에 10을 입력하고 제작 버튼을 눌러주세요. 그럼 아래 화면처럼 10개의 대지가 생성됩니다. 2. 아트보드 활성화하기 활성화된 아트보드는 사이즈 변경도 되고 위치도 옮기고 아트보드의 수도 늘릴 수 있는데요! 우선 아트보드의 수를 늘리고 싶다면 ALT +SHIFT 키를 누른 채로 아트보드를 드래그하면 동일한 사이즈로 하나 더 만들

프리미어 내보내기

안녕하세요. 소이정입니다. 오늘은 프리미어를 통해 컷편집도 완료하고, 자막도 넣은 후 영상 편집이 마무리된영상의 완성본을 추출하는 과정인 Export 하는 방법을 알려드리겠습니다.내보내는 방법이 여러 가지인데다가어려운 용어로 쓰여있어서 잘 모르는 부분이 많은 텐데요.함께 차근차근 따라 해보세요~ 0. 내보내기 할 파일 가져오기 기존에 작업했던 파일도 괜찮고, 영상만 얹은 프로젝트 파일도 괜찮답니다!왜냐하면 내보내기 설정에 관해 말씀드릴 거라, 어떤 영상이든 상관없기 때문이에요! 그래도 간단하게 무언가 만져보고 싶다 하시는 분은,,, 기존에 작성되어 있는 프리미어 글을 보고 오시면 되겠습니다 ㅎㅎ저는 직전에 포스팅했던 중첩하기 프로젝트 파일을 이용해 볼게요! 기존에 작업했던 파일도 괜찮고, 영상만 얹은 프로젝트 파일도 괜찮답니다!왜냐하면 내보내기 설정에 관해 말씀드릴 거라, 어떤 영상이든 상관없기 때문이에요! 그래도 간단하게 무언가 만져보고 싶다 하시는 분은,,, 기존에 작성되어 있는 프리미어 글을 보고 오시면 되겠습니다 ㅎㅎ저는 직전에 포스팅했던 중첩하기 프로젝트 파일을 이용해 볼게요! 디지털&디자인 에이전시 소이정 : 네이버 블로그 안녕하세요. 더할나위 없이 즐거운 우리는 소이정입니다. (WEB) soijeong.com blog.naver.com 1. 파일 내보내기 하는 방법 파일을 내보내기 하는 데는 여러 가지 방법이 있는데요. 첫 번째는 상단 툴바 File - Export - Media를 눌러 진행할 수 있습니다. 두 번째는 단축키로만 가능한데요, Ctrl + M을 눌러줘도 됩니다. 세 번

프리미어 중첩 기능 사용하기

안녕하세요, 소이정입니다. 프리미어로 영상을 편집하다 보면 자른 조각들이 하염없이 늘어나보기에도 안 좋고 헷갈릴 때가 많아요 ㅠㅠ그럴 때는 중첩 기능을 활용하여 화면을 깔끔하게 정리하는 게 좋은데요!우선, 사전에서 중첩은 아래와 같이 정의하고 있다고 해요. 중첩 (重疊) [중ː첩][명사] 거듭 겹치거나 포개어짐. 한마디로 합치는 것이죠.포토샵에서 그룹 기능과 비슷하다고 볼 수도 있을 것 같은데요.프리미어에서의 중첩 기능 어떻게 사용하는지 함께 해보시죠! 1. 프리미어 실행 후 프로젝트 생성하기 프리미어를 실행해 줍니다. 그리고 새 프로젝트를 눌러주세요. ①프로젝트 파일 이름과 ②프로젝트 파일이 저장될 위치를 지정한 후 ③ 만들기를 눌러줍니다. 2. 영상 소스 가져온 후 타임라인으로 이동 중첩하고자 하는 영상을 드래그&드롭하여 프리미어로 가져와줍니다. 타임라인으로 옮겨주기 해주세요. 이후 저는 영상위에 텍스트까지 넣어봤는데요. 여러분도 마음껏 영상을 꾸며주세요! 3. 중첩 기능 사용하기 다음은 중첩 기능입니다. ①영상 레이어 V1, V2와 텍스트 레이어 V3까지 드래그를 통해 선택한 후 오른쪽 마우스를 클릭하면 상단과 같은 메뉴가 나타나는데요. 그중에서 ②중첩을 클릭해 주세요!영상 레이어가 잘 선택되었는지는 바깥에 둘러진 흰 색선이 있는지 없는지를 보면 쉽답니다! 4. 시퀀스 이름 설정 후 중첩된 레이어 확인 중첩을 선택한 후 이름을 정해주세요. 기존의 중첩 시퀀스 01에서 저는 영상 1+2라고 적었는데요. 이때 scene1, scene2 와 같이 장면을 구분해 줄 만한 이름으로 정한다면 열어보지

웹 설계 툴 Axure 링크 기능 알아보기

안녕하세요. 소이정입니다. 지난번에 이어 오늘은 Axrue 강의 두 번째를 들고 왔습니다.강의라고 할 것도 없이간단한 기능 하나를 설명해 드리려고 합니다!먼저 웹페이지를 들어가면 상단에 있는 메뉴들이 있는데요.찾고자 하는 정보를 얻기 위해 상단의 메뉴를 클릭하면 해당 서브 페이지로 이동하고 정보를 확인하고 갑니다.액슈어도 웹페이지 기초를 설계하다 보니 일반 홈페이지와 비슷한 기능들을 많이 구현할 수 있답니다.그래서 오늘은 메뉴를 클릭하면 다른 페이지로 바로 이동을 할 수 있는링크 걸기를 설명해 드리겠습니다~! 본격적으로 시작하기 전에!지난번에 마스터를 만드는 법을 알려드렸죠. 모르시는 분은 여기서 먼저 확인해 주세요.▼ 액슈어 기본 화면 설정 ▼ 초보 웹기획자를 위한 Axure 강좌 [BY 소이정] 안녕하세요. 소이정입니다!오늘은 코딩 작업 없이도 웹사이트를 간단히 설계할 수 있게 도... naver.me 1. 마스터 생성하기 지난번 포스팅에서 소개 드렸던 파일을 예시로 그대로 가져왔어요. 제일 먼저 마스터로 설정해둔 GNB는 메뉴를 누르면 해당 페이지로 이동하는 링크 기능이 필요한데요. 메뉴를 눌렀는데 페이지가 움직이지 않고 그대로라면 안되겠죠?GNB를 설계한 페이지를 열어봅시다. 첫 번째는 MASTERS 패널에서 더블클릭하거나, 상단에 탭에서 선택할 수 있습니다. 편한 방법으로 창을 열어주세요~!* GNB란? Global Navigation Bar, 웹페이지와 웹페이지를 서로 연결하는 하이퍼링크를 모아두는 자리로, 웹사이트를 방문한 사용자의 이동경로에 관여하며, 정보에 대한 접근을 쉽게 해주는 요소 2.

프리미어 트랙 매트 키 적용하기

안녕하세요. 소이정입니다. 오늘은 트랙매트키를 이용해 텍스트 인트로를 만들어볼게요.저번 프리미어 PIP기법을 소개해 드릴 때 사용했던 기술인데요!텍스트를 사용할 땐 어떻게 적용되는지 한 번 확인해 봅시다. 1. 프리미어 실행 후 프로젝트 생성 제일 먼저 프리미어를 실행하고 새 프로젝트를 눌러주세요. 프로젝트의 이름과, 위치까지 설정한 후 만들기를 클릭해 줍니다. 그럼 프로젝트 생성 성공! 2. 영상 소스 가져오기 오늘은 총 두 개의 영상을 준비해 볼게요. 제일 먼저 글자 안에 들어갈 영상을 가져와주세요. 저는 벚꽃이 있는 영상을 준비했는데요. 타임라인까지 영상을 드래그&드랍으로 끌고 옵니다. ※영상 출처 : pixabay, 이하 동일 3. 텍스트 작성하기 타임라인 옆에 있는 툴바에서 T 모양 아이콘을 누르고 프리뷰 화면에서 텍스트를 작성해 줍니다. 저는 벚꽃이기도 하고 해서 SPRING이라고 썼습니다. 텍스트가 맘에 들지 않는다면, 옆에 효과 컨트롤 패널에서 텍스트의 크기와 폰트를 변경해 주세요! 저도 조금 더 잘 보이게 크고 두꺼운 폰트로 수정했습니다. 4. 트랙 매트 키 적용 이제 트랙매트키를 적용할 건데요. 효과 창에서 트랙매트키를 찾아 영상에 적용합니다. 효과 패널에서 트랙 매트 키를 검색해 V1에 있는 영상에 드래그&드랍으로 적용시켜줍니다. 그럼 효과 컨트롤 창에 트랙 매트 키가 있는 것을 확인할 수 있답니다! 그러고 나서 트랙 매트 키의 매트를 비디오2로 변경시켜줍니다. 왜냐하면 텍스트를 적용시켜야 하기 때문이죠! 비디오 2를 선택해 주면, 이렇게 변경된답니다! 5. 배경 영상 추가하

에프터이펙트 애니메이션 효과

안녕하세요, 소이정입니다. 오늘은 에프터이펙트 기초 강좌 두 번째!애니메이션 효과를 알아보도록 하겠습니다.영상의 타이틀을 만들기에도 적합하고자막에도 활용할 수 있는 텍스트 애니메이션입니다! 1. 컴포지션 생성하기 에프터이펙트를 켜고 새 프로젝트를 클릭해 줍니다. 새로운 컴포지션을 만들어줍니다! 새 컴포지션 누르기, Ctrl +N 혹은 프로젝트 패널 우클릭 - 새로운 컴포지션 클릭하기. 2. 단색 레이어 생성 이렇게 새로운 컴포지션 즉, 새로운 파일을 생성했으면 이제 종이를 대고 그림을 그려야겠죠?컴포지션의 종이 같은 역할을 하는 것이 단색 레이어인데요. 단색 레이어를 생성하는 방법은 두 가지입니다. 첫 번째는 레이어 패널에서 마우스 우측 클릭을 하고 새로 만들기 - 단색을 클릭하여 단색 레이어를 생성하기, 두 번째는 상단 메뉴바에서 레이어 - 새로 만들기 - 단색으로 만들어주셔도 됩니다. 어떤 색의 종이를 깔지 정하면 되는데요. 아래 Color 을 선택해 봅시다! 원하는 색으로 선택했으면 단색 레이어 만들기 끝! 3. 텍스트 레이어 만들기 자, 이제 애니메이션 효과를 입혀줄 텍스트를 써야 하는데요. 텍스트 레이어 만들기도 단색 레이어 만들 때와 마찬가지로 레이어 패널에서 마우스 우클릭을 통해 진행하거나, 상단 메뉴바에서 레이어 - 새로 만들기 - 텍스트로 진행하면 됩니다. 아니면 상단 툴바에 있는 T를 누르고 컴포지션 패널을 선택해도 텍스트가 생성된답니다! 4. 텍스트 작성 및 수정하기 편한 방법을 선택해 텍스트 레이어를 생성해 주세요. 저는 에프터이펙트라는 텍스트를 작성해 보았어요. 일단 텍스트를 쓰

프리미어 프로로 인스타용 영상 만들기

오늘은 프리미어로 인스타용 정사각형 영상을 만들어볼 건데요.정사각형 영상은 인스타에 올리기도 편하고 가로 세로를 변환해도 똑같다는 장점이 있어요!와이드한 영상보다 아기자기한 느낌을 주고 싶을 때 사용하기도 한답니다~참고로 정사각형 영상은 편집보다 촬영이 더 중요한데요.모든 영상이 그러하지만 특히 정사각형 영상은 프레임 설정에 한계가 있기 때문에 더 유념하셔야 해요.편집 설명에 들어가기 전, 먼저 정사각형 구도를 생각한 후 촬영해야 한다는 것을 살짜쿵 언급하면서..!프리미어로 인스타용 정사각형 영상 만들기!시작해 볼게요! 1. 프로젝트 생성 후 영상 소스 가져오기 제일 먼저 프리미어를 켜줍니다. ①프로젝트 파일의 이름을 설정하고 ②파일을 저장할 위치도 설정해 준 후 ③만들기를 눌러 프로젝트 생성을 해줍니다. 그리고 정사각형으로 비율을 변경하고자 하는 컨텐츠를 불러옵니다. 2. 시퀀스 만들기 ①아래 접힌 종이 아이콘(새 항목)을 눌러 ②시퀀스를 선택합니다. 원래는 시퀀스 선택 없이 타임라인으로 드래그 & 드랍하여 자동으로 시퀀스가 생성되게끔 했죠. 하지만 오늘은 영상과 시퀀스의 설정이 다르게 적용되어야 하니 수동으로 만들어 볼 거예요! 3. 시퀀스 설정하기 새 시퀀스창이 뜨면 여러 가지 사전 설정이 나오는데요. 해당 설정은 프리미어 내부에서 사전 설정을 저장해둔 것입니다. 자주 사용하는 시퀀스 설정이 있다면 오늘 배울 시퀀스 설정을 저장해두고 사용하시면 됩니다!저장되어 있는 사전 설정에 내가 원하는 시퀀스가 없다면 설정탭을 클릭하여 생성하도록 합시다~시퀀스 사전 설정 옆에 있는 ①설정탭을 눌러줍니다. 그