본문 바로가기

분류 전체보기107

인스타그램 필터만들기! 누구나 쌉가능 SparkAR 사용방법! [step3] 안녕하세요 이전 단계인 [step2]에서는 사용할 이미지를 편집하고, 얼굴 방향을 인식하기 위한 faceTracker를 추가하였습니다. 이번 시간에는 만든 이미지를원하는 위치에 지정하는 방법을 배워보겠습니다. step2에서 했던 faceTracker 가 추가되어 있습니다. 화살표로 보이는 +를 선택한 후, 밑으로 내리시면 Plane이 있습니다. Plane을 추가하시면 됩니다. 얼굴에 붙일 이미지를 위해 판을 추가하는 과정입니다. 추가한 Plane을 faceTracker 안으로 넣어야 합니다. 이미 안에 넣어져 있다면 다음으로 넘어가시고, 밖에 있다면 plane을 faceTracker로 넣어야 합니다. ​ 그리고 plane을 선택하시면 오른쪽 메뉴에 Materials가 있습니다. +를 눌러서 추가해 줍니다.. 2023. 2. 28.
인스타그램 필터만들기! 누구나 쌉가능 SparkAR 사용방법! [step2] 이전 단계인 [step1]에서는 인스타그램 필터를 만들기 위한 sparkARstudio를 다운로드하고 설치한 후, 얼굴 방향을 인식할 수 있는 facetracker를 추가하였습니다. 이번 단계에서는 얼굴에 붙일 이미지 만들어 보겠습니다. ​ ​ 얼굴에 붙일 이미지를 만들려면 원하는 이미지를 그리거나, 다운로드해서 배경을 잘라주어야 합니다. 배경이 있는 파일을 사용하게 되면 그 자체로 화면에 보이기 때문에 화면에 띄우고 싶은 부분만 잘라내어야 합니다. ​ 저는 Figma라는 웹 디자인 툴을 이용하여 이미지를 잘라내었습니다. 무료로 사용할 수 있어서 좋습니다. ​ 이미 편집된 이미지를 가지고 계시다면 step3로 넘어가시면 됩니다. ​ https://www.figma.com/files/recent?fuid=.. 2023. 2. 28.
인스타그램 필터만들기! 누구나 쌉가능 SparkAR 사용방법! [step1] 인스타그램 사용하는 사람들 여기에 모이십시오. 제가 만든 인스타그램 필터 만드는 과정을 설명해 보겠습니다. 결과를 잠시 보자면, 밑에 캡처와 같이 눈에 동전이 생기는 필터를 만들 겁니다. 인스타그램의 필터를 만들기 위해서는 메타에서 제공하는 sparkAR이라는 툴이 있습니다. 위 링크로 들어가셔서 프로그램을 다운로드하여 설치하면 됩니다. 맨 위에 있는 [학습]을 선택하신 후 왼쪽에 [다운로드]를 클릭하면 Spark AR을 설치하실 수 있습니다. 다운로드 페이지로 들어가시면 세 가지 옵션이 나옵니다. Spark AR Studio : 이번에 다운로드할 필터를 만들기 위한 툴입니다. 각각의 소프트웨어에 맞는 (windows 또는 macOS) 프로그램을 설치하시면 됩니다. Spark AR Player 앱 : 나.. 2023. 2. 28.
[웹사이트 추천] 길이를 재고 싶을 때 클릭 몇 번으로 길이 재기 가능한 사이트 https://janggo1010.github.io/measure_distance.html Click to Measure Distance janggo1010.github.io 제가 만든 사이트입니다!! 컴퓨터에 물체를 대고 끝에서 클릭후 반대편 끝에서 클릭을 하면 길이를 잴 수 있습니다. 점은 계속해서 연결됩니다. 작은 물체의 길이가 궁금하신 분들을 위해 만들어 봤습니다.ㅋㅋㅋ 앞으로 좀 더 쓰기 유용하도록 수정할 것 이니 미흡해도 양해 해주시면 감사하겠습니다! 일단 지금은 대충 길이를 재고싶으신 분들이 쓰시면 좋습니다!! 2023. 2. 23.
[HTML/CSS 간단 TIP] 가운데 정렬 시키기 css코드 내용을 가운데 정렬하고 싶으신 분들 잘 오셨습니다. ​ 결과부터 말하자면 .class_name{ display:block; margin-left: auto; margin-right: auto; } 가운데 정렬 코드 3개를 css파일에 넣어주거나 style로 추가하시면 됩니다. ​ 상세한 과정을 원하신다면 계속 읽으시면 됩니다 정렬이 잘 되는지 쉽게보기 위해서 이미지를 넣어보겠습니다 Jang go 안녕하세요 냉장고입니다. img 코드를 넣고 class이름은 center로 만들어 보겠습니다. ​ 그냥 사진만 두면 허전하니까 이름을 h3태그로 추가하고, 인사말을 간단하게 넣어보겠습니다. 둘다 class가 필요합니다. 이름의 class를 name으로, 인사말의 class를 hello라고 만들어 보 겠습니다. 일.. 2023. 2. 23.
[HTML/CSS 간단 TIP] Visual Studio Code 개발 웹페이지 실시간 확인 웹페이지를 만들면서 바로바로 코드의 결과를 확인하고 싶으신분들!!으 잘 오셨습니다. !! 제가 소개할 프로그램은 Live Server 입니다. 1) 일단 실행시켜 볼만한 파일을 만든 후 2) 화살표가 가르키는 버튼을 선택합니다. 3) Live Server 를 입력한 후 4) 설치를 누릅니다. (제거는 이미 설치완료 되어 있어서 사용 안함으로 뜨는것 이기 때문에 신경 노노) 5) [아까 만든 파일위에서 우클릭 -> Open with Live Server 클릭 ] [Alt + L 또는 Alt + O 누르기] 6) 바로 실행 화면이 나옵니다. Visual Studio Code 에서 실행한 파일의 코드를 변경한 후 저장하면 바로 변경화면으로 나옵니다. 개인적으로 정말 편리합니다 2023. 2. 23.
반응형

티스토리툴바