반응형

분류 전체보기 238

[프로그래밍] Vue.js 코딩 개발을 위한 Visual Studio Code 설치 방법 (마이크로소프트 비주얼 스튜디오 코드, 오픈소스, 무료)

Vue.js를 통해 애플리케이션을 코딩해 프로그램을 만들기​ 위해서는 프로그래밍할 수 있는 코딩 개발툴을 설치해야 하는데요. 많이 사용되는 것이 바로 Microsoft 사의 Visual Studio Code 입니다. 비주얼 스튜디오 코드는 가벼워 쾌적한 개발환경을 제공하고 다양한 프로그래밍 언어를 사용할 수 있어 많은 사람들이 사용하고 있습니다. 그럼 실제 설치해보면서 과정을 남겨볼게요. 먼저 아래 사이트를 방문해 설치파일은 다운로드 받습니다. Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and ..

IT/Vue.js 2024.03.11

[프로그래밍] Vue.js 코딩 개발을 위한 빌드 환경 구성 및 실행 테스트 해보기 (VSC, Visual Studio Code, build, vite, install)

지난 포스팅 과정에서 node.js 설치와 Visual Studio Code를 설치해봤는데요. 이제 본격적으로 Vue.js 실습을 진행해 보려고 합니다. 1. 프로젝트 생성 먼저 샘플 코드 작성을 하기 위해서는, vue 프로젝트를 생성해야 합니다. 프로젝트를 생성하기 위해서는 프로젝트가 위치할 경로를 결정해야 하는데요. 이번에는 찾기 쉽게 C:\ 아래에 바로 프로젝트를 생성해보려고 합니다. 비주얼 스튜디오 코드에서 터미널 탭으로 이동하면 콘솔창에서 명령어를 수행 할 수 있는데요. 먼저 c:\ 이동하기 위해 아래 "cd c:\" 명령을 쳐줍니다. 그 다음 "npm create vue@latest" 를 쳐주면 아래와 같은 입력항목들이 나오는데요. 여기서 Project name은 "vue_test"로 작성하고..

IT/Vue.js 2024.03.11

[프로그래밍] Vue.js 개발을 위한 Node.js 설치 방법

최근 Vue.js를 통해 개발을 해보려고 공부를 하고 있습니다. 그러기 위해서는 환경을 구성해야 하는데요. 먼저 개발된 Vue.js 스크립트를 테스트하기 위한 서버와 빌드환경을 구성해야합니다. 그러기 위해서는 Node.js를 설치해야 합니다. Node.js 설치하기 아래 링크를 통해 Node.js를 다운로드 받아 설치를 진행해야 하는데요. Node.js — Download Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 본인 PC의 OS에 맞는 파일을 다운로드 해야하는데요. 현재 가장 최신의 LTS 버전은 20.11.1 입니다. 커다랗게 표시된 LTS란 Long Term Support 의 약어로 장기 지..

IT/Vue.js 2024.03.11

[취미] 고양 스타필드 건담 베이스, 8살 아들과 함께 건담 조립 취미 만들기 (다릴 바르데 HG, 니퍼 종류)

저는 고양 스타필드를 자주 가는데요. 특히 올해 8살이 된 아들과 놀거리가 많기 때문에 함께 자주 갑니다. 이번에는 토이킹덤에 있는 레고를 구매를 하려고 갔는데요. 건담베이스가 새로 생겨서 방문해봤습니다. 들어가는 입구부터 멋지게 꾸며 놓았더라고요. 겉으로 보기엔 들어가는 입구가 좁아 보였지만 안쪽으로 들어가면 공간이 쭉 이어져서 꽤나 큰 매장 사이즈를 가지고 있습니다. 입구부터 구매를 유혹하는 손짓이 가득합니다. 입구쪽에는 새로나온 재품이라던지 한정판 같은 모델들을 위주로 배치해 놓았더라구요. 아이들이 좋아하는 포켓몬 시리즈들도 많이 전시가 되어 있어 나이가 어린 친구들에게도 좋을 것 같아요. HTML 삽입 미리보기할 수 없는 소스 이제 제가 좋아하는 로봇들이 슬슬 나옵니다. 몰랐는데 조립을 한 후 아..

리뷰/내돈내산 2024.02.18

[어도비 프리미어 프로] 애플 맥북 프로 M3 pro 새로운 한글 폰트 설치 및 적용 확인 (Gmarket Sans 무료 폰트)

안녕하세요? 최근 영상편집을 위해 맥북 프로 M3 pro를 구입해 어도비 프리미어 프로로 아주 영상편집에 잘 활용하고 있습니다. 이제는 기본 폰트 외 다른 폰트로 영상편집을 하기 위해 폰트를 설치해보았습니다. 그 과정을 공유해 드릴게요. 먼저 폰트를 다운로드 받습니다. 제가 자주 사용하는 지마켓 Sans 폰트입니다. 아래 그림에도 나와 있지만 누구나 제약없이 자유롭게 수정하고 재패포 할 수 있는 무료 폰트입니다. 위에서 보면 옵션이 TTF / OTF 2가지가 있는데요. 저는 이번에 TTF를 다운로드 받아서 설치를 진행했습니다. 만약 무료 폰트인 지마켓 산스를 설치 하시려면 아래 링크로 들어가시면 됩니다. G마켓 - 쇼핑을 바꾸는 쇼핑 Gmarket Sans corp.gmarket.com HTML 삽입 미..

[유튜브] 한국어, 영어 등 다양한 언어로 유튜브 자막 제목 상세설명 다국어 설정해보자

최근에 레고를 주제로 유튜브 채널을 개설하고 운영하고 있습니다. 아무래도 레고라는 주제가 한국에서 그렇게 인기 있는 주제는 아니기 때문에, 현재 영어를 기반으로 글로벌 시청자들을 대상으로 영상을 업로드 하고 있습니다. 그렇다고 한국의 시청자를 놓칠수는 없겠죠? 유튜브 영상을 업로드하면 가장 기본으로 "제목"과 "상세설명"을 등록할 수 있는데요. 현재는 영어로만 등록되어 있지만 한국 시청자들을 위해 한국어로 등록해야합니다. 유튜브에서는 해당 컨텐츠를 글로벌하게 다양한 시청자들을 대상으로 하기 때문에, 다국어에 대한 지원을 해주는데요. 오늘은 제목, 상세설명, 자막에 대해서 다국어로 등록하는 방법에 대해 알아보려고 합니다. 먼저 유튜브 스튜디오로 들어가는데요. App이 아닌 웹페이지로 접속을 하고 반드시 P..

Youtube/유튜브 2023.12.20

[어도비 프리미어 프로] 가로 세로 돌아간 유튜브 촬영 영상 일괄 회전시키는 방법 (일괄 가로세로 전환방법)

최근 레고 유튜브 동영상을 촬영하고 업로드를 하고 있는데요. 항공샷으로 찍다보니 핸드폰이 위아래를 인식하지 못해 화면이 돌아가서 프리미어 프로에 올라가는 현상이 발생했습니다. 한개의 동영상 클립을 회전할 때에는 "효과컨트롤" 탭으로 이동해 "회전" 항목에 90도나 -90도를 입력해서 영상을 회전시키면 되는데요. 이게 수십개의 동영상을 다 돌려야 하는거라 일일히 이런 작업을 진행하기에는 너무 비효율적입니다. 그럴 때 일괄적으로 세로에서 가로로 전환하는 방법에 대해 간단하게 설명해 보려고합니다. 먼저 위에서 설명한 것 처럼 촬영한 유튜브 영상을 시퀀스에 올려놓고, "효과 컨트롤" 탭에 있는 "회전" 항목의 값을 변경해 정상적인 방향으로 돌려줍니다. 제 영상의 경우는 회전에 90도를 입력하면 정상적으로 돌아갔..

[YouTube] 유튜브 스튜디오에서 "현재 위치에는 수익을 창출할 수 없음" 해결하는 방법

최근에 다른 채널을 한개 더 생성을 해서 운영을 하고 있습니다. 유튜브의 경우 수익창출에 대한 환경설정을 해야 하는데요. 유튜브 채널을 생성한 후 유튜브 스튜디오에 로그인을 하고 하단에 있는 "수익" 탭으로 가면 아래와 같은 화면이 기본적으로 나타나게 됩니다. 아무래도 유튜브는 글로벌 플랫폼이기 때문에 각 나라의 방송 송출의 규제와 수익에 대한 지급의 문제들이 엮여있기 때문에 위와 같이 본인이 어디에 거주를하고 유튜브를 하는지를 설정해줘야 하는 것이죠. 아직 수익을 창출하려면 한참은 멀었지만, 그래도 환경은 미리미리 설정해두어야 나중에 당황하는 일이 없겠죠? 위에서 "자세히 알아보기"를 클릭하고 넘어가면 아래와 같은 YouTube 고객센터의 도움말이 나타나는데요. 간단하게 설명하자면 유튜브스튜디오로 들어..

Youtube/유튜브 2023.12.19

[어도비 프리미어 프로] 2대 이상의 카메라로 촬영한 유튜브용 영상 멀티카메라 편집하기 (여러 카메라 비디오 오디오 선택적 출력)

최근 아들 동영상을 촬영하면서 새로운 시도를 했던 부분이 핸드폰 2대로 촬영을 했다는 것입니다. 촬영을 하고 난 후 아래와 같이 영상을 올려놓고 각 부분을 자르면서 편집하면 되겠지만 그러면 상당히 불편하겠죠? 그래도 명색이 어도비 프리미어 프로인데, 아주 편집을 스마트하게 할 수 있는 방법이 있을거라 생각하고 검색을 했습니다. 역시나 프리미어 프로에서 제공하는 기능 중 멀티카메라 편집이라는 아주 좋은 기능이 있더군요. 그럼 어떻게 멀티카메라 편집을 할 수 있는지 알아볼까요? 먼저 카메라 2대로 촬영한 영상을 프로젝트로 드래그 & 드롭으로 가져옵니다. 2대 이상이라도 별로 달라질 필요는 없겠죠. 동시에 촬영한 영상이니 아래와 같이 레이어를 쌓듯이 영상을 트랙별로 얹어 줍니다. 여기서 문제는 아무리 동시에 ..

[어도비 프리미어 프로] 영상 미리보기를 버벅거리지 않게 쾌적한 유튜브 영상 편집하는 설정 방법

전 윈도우 게이밍 노트북으로 유튜브 영상을 편집하고 있습니다. 성능도 꽤 괜찮고 메모리 및 SSD도 업그레이드를 진행했는데도 4K 영상을 미리보기 할 때에는 장사가 없더군요. 최근에는 편집에 재미를 붙여서 어도비 프리미어 프로의 업데이트된 기능인 텍스트 기반의 편집도 해보는데 이거까지 하니 더 미리보기가 느려지더군요. 그래서 유튜브에 미리보기를 버벅거림 없이 편집하는 방법에 대해서 검색을 해봤고, 비됴클래스에서 나온 방법으로 해보니 상당히 괜찮았습니다. 물론 원리는 미리보기 영상을 720P 프록시 영상으로 미리 만들어 놓고 하는거라 처음에 소요되는 시간은 있지만, 편집할 때 아주 짧은 버벅거림이 편집의 흐름을 깨뜨리니 이정도는 충분히 감수할 수 있었습니다. 먼저 편집할 영상들을 프로젝트에 드래그 & 드롭..

반응형