Spark AR로 콘텐츠 만들기 (6) : Image Tracking을 활용한 AR 명함
Вставка
- Опубліковано 10 вер 2024
- - Image Tracking 정의와 활용 방법
- SparkAR의 Target Tracker 기능 활용하기
- AR 명함 만들기 따라해보세요😀
0:14 Intro
1:09 Image Tracking이란?
2:06 Target Tracker란?
3:19 실습에 필요한 소스 준비
4:24 튜토리얼 시작(Spark AR)
5:38 Target Tracker 세팅
6:32 증강될 가상 객체 세팅
11:25 Guide 이미지 세팅
15:31 Patch로 Guide 이미지 제어하기
17:41 Patch로 Instruction 추가
19:49 실습한 필터 Publish
20:10 AR 명함 제작 프로세스
21:13 AR 명함 결과물
21:28 Outro
[AR 명함 실습 소스 다운받기]
drive.google.c...
[SparkAR Target Image Guide 공식문서]
sparkar.facebo...
[businessCardAR 효과 바로가기]
/ 419729969764461
[개발자옆디자이너 인스타그램]
/ dev.n.design
#증강현실 #AR #메타버스 #SparkAR #스파크AR #콘텐츠 #디자인 #디자이너 #ImageTracking #targetTracker #instruction #businessCard
많은 교육 영상중에서 이렇게 친절하고 알기 쉬운 영상은 처음입니다. 원래 새로운 지식을 습득할 때 스트레스를 많이 받는데 워낙 천천히 쉽게 가르쳐주셔서 재밌게 해낼 수 있었어요! 좋은 컨텐츠 감사합니다
재밌게 봐주셔서 감사합니다!😝
그림책 작가인데 출간된 그림책 이미지를 tracking해서 AR을 제작할 수 있었어요. 차분하게 잘 설명해주셔서 알려주신 내용을 토대로 응용할 수 있었어요. 정말 도움이 많이 되었어요. 감사드립니다.
우와 저희 콘텐츠가 도움이 되었다니 너무 기분이 좋아요. 작가님 채널도 가서 봤는데 콘텐츠도 너무 좋더라고요ㅎㅎ
메타버스 프로그램 기획으로 과제를 하고 있는데 이렇게 좋은 영상이 있을줄이야..!! 정말 감사합니다!
감사합니다
안녕하세요 개발자님!! Animation Sequence에 PNG파일이 아닌 제가 만든 Mixamo(3d 모션 영상)을 넣고 싶은데 이런 경우에는 어떻게 해야 하나요??
앗 댓글을 지금 봤네요ㅜㅠ 너무 늦었지만 혹시 같은 궁금증을 가진 다른 분들을 위해서 답변 드리자면, target Tracker 안에 plane 대신에 3D 에셋을 넣어주시면 됩니다. 3D 모델링 파일과 모션 등은 Spark AR에서 지원하는 포맷에 따라야하고요. 제가 3D를 많이 써보지 않아서 Mixamo에 대해서 잘 모르지만, 임포트 가능한 3D 포맷은 아래 링크 참고해서 확인해주세요.😊
sparkar.facebook.com/ar-studio/learn/articles/fundamentals/supported-file-formats/
spark ar로 패키지를 만들려고 하고 있는데 3d맥스에서 만든 3d파일을 spark ar로 불러오니깐 뼈가뒤틀리는 현상이 일어나는데 혹시 방법이 있을까요?
제가 맥스를 사용하지 않아서 정확히는 모르겠지만.. C4D에서 3D 캐릭터를 가지고 올 때 Deformer를 적용한 부분은 깨진다거나 하는게 있더라고요. 아마도 맥스에서만 적용 가능한 어떤 효과가 있는게 아닐까 싶어요. 혹시 해결하셨으면 이유가 뭐였는지 알려주시면 다른 구독자님들에게 도움이 될 것 같아요ㅎ😅
너무 잘 보고 있습니다..좋은 강의 감사합니다!
너무 좋은 강의 감사합니다 ㅜㅜㅜ 하나 여쭤보고싶은게 잇는데요..! 지금 필터를 만들고 있고 곧 QR를 만드려고하는데, QR코드는 필터가 승인이 나고나서 넣을 수 잇는거죠? 승인이 나면 메일로 연락이오나요..? 그리구 필터 링크는 어디서 가져올수있나요? ㅜㅜ 영상에서는 허브라고 하셨는데 승인이 나면 메일에 따로 뜨나용..? 너무 질문 많이드려서 죄송합니다…!혹시 시간되실때 답주면 너무 너무 감사하겠습니다 ㅜㅜ흑흑
QR코드는 필터 승인이랑 상관없어요! 물론, 필터가 정상적으로 오픈 되어야 제대로 연결이 되겠지만.. 그전에 미리 작업해 놓으셔도 돼요. 미리 만들어서 명함에 인쇄해놓고 나중에 그 QR코드 편집화면에 들어가서 필터 링크만 정확히 입력해주시면 됩니다.
그리고 허브라고 얘기하는건, 필터를 등록하는 페이지인데요, facebook.com/sparkarhub 여기에 등록한 필터들 목록이 있어요. 공유하기 버튼을 클릭하면 거기에 각 필터들의 링크 주소들이 있습니다. 그걸 복사해서 QR코드에 넣는거에요. 그리고 필터는 승인이 나면.. 페이스북 앱으로 알림이 왔던것 같아요. (참고로 인스타그램 계정 - 페이스북 페이지를 연동해놔야만 필터 등록을 하실 수 있을거에요)
말로 하면 더 복잡해보이는데.. 직접 해보시면 생각보다 어렵지않아요. 차근차근 해보시고 잘 안되는거 있으면 또 물어보세요!😉
개발자라고 해도 믿겠어요. 진짜 대단하십니다.
감사합니다😊
감사합니다!🔥🔥🔥🔥
너무 잘 보고 있어요. 열심히 정주행 해서 재미있는 AR 만들어보고 싶네요.
네ㅎㅎ 재밌는거 많이 만들어보세요!😊
오 너무 신기하네요! 연습해서 꼭 써먹어보겠습니다!
❤❤❤❤❤ 잘 배웠습니다~
정말 원하고 원하던 영상이네요 ㅠㅠ 감사합니다!!
한가지 궁금한게 있습니다 스파크AR에서는 크기 조절하는게 영상에서 9:24에서 보여주신 비율로 조정하는 방법밖에 없을까요? 포토샵처럼 픽셀의 크기를 바로 적어서 조절하는 방법이 있는지 궁금하네요~
spark ar 내부에서는 픽셀 단위를 사용하지 않는 것 같아요. 소스 제작할 때 비율을 잘 계산해서 사용하고 있습니다..ㅎㅎ
와 알려주신대로 한번 만들어볼래요🤍
바쁘다바빠현대사회에서는 AR 명함 하나쯤은 있어야죠ㅎㅎㅎ😝
Thanks!
슈퍼땡스도 너무 감사합니다!😆 더 힘내서 좋은 콘텐츠들로 보답하겠습니다ㅎㅎ
마지막에 카메라 방향 전환 문구 넣는 디바이스 넣는거요 저는 커스텀 인스트럭션만 없는데 무슨 문제일까요 순서대로 잘 쫓아왔는데 ㅜㅜ
정답인지는 모르겠지만.. plane에서도 enable For - Front Camera 해제하고, Device - Conditional instruction 가져와서 연결하고 옵션 변경하니까 돼요
7:59 애니메이션 시퀀스 설정할 때 파일 형식을 png 말고 mp4와 같은 영상으로도 설정해도 되나용??
spark ar에서는 영상 파일 포맷은 지원하고 있지 않습니다. png시퀀스는 다수의 이미지라고 볼 수 있는데, mp4 파일은 하나의 영상 파일이라고 할 수 있거든요. 좀 더 자세한 지원 포맷들은 아래 링크에서 확인해 보세요!
spark.meta.com/learn/articles/fundamentals/supported-file-formats/
안녕하세요 ㅎㅎ 정말 도움 되는 영상 감사해요ㅎㅎ
그 제가 연속되는 png파일을 준비해서 animation sequences에 넣었는데요!
1~30까지가 있을 때 약 10프레임 정도가 지나갈 때 마다 잠깐 1로 돌아갔다 되돌아오는 현상이 있어요
어떤 오류일지 아실까요??
남겨주신 예제 애니메이션 파일은 부드럽게 잘 되는거보니 제 파일이 문제가 있는거같아요
사이즈는 동일한데 이상하네요
단일 텍스처로 까보니까 스파크내에서 1 2 3 4 5 6 7 8 9 1 10 11 12 이런식으로 읽히는 문제였어요.
괜히 앞에 00을 붙이는게 아니였네요 ㅋㅋ
@@198th_contestant 제가 답이 늦었는데 스스로 깨우치셨군요😝 그래서 보통 시퀀스 파일 뽑을때는 그냥 1,2,3,4 이렇게 안하고 01, 02, 03 이런식으로 숫자를 매겨요. 컴퓨터가 1,11,12,13... 이런식으로 읽어나갈 수 있으니까요. 근데 9하고 10 사이에 1이 들어간건 약간 의아하긴 하지만 어쨌든 뭔가 숫자가 꼬이긴 했었나봐요. 암튼 잘 해결하셨다니 다행입니다!
@@Dev_and_Design 1 11 로 꼬인게 맞을거에요 감사해요ㅎㅎ
명함이 아니어도 로고만으로도 잘 적용이 될까요?
로고가 어떻게 생겼느냐에 따라 좀 달라요! 근데 로고의 형태들이 대부분 단순화 되어 있어서 로고 심볼 만으로는 적용이 잘 안될 수는 있지만 로고 타입까지 포함되어있다면 잘 될거라고 생각됩니다😊
18:13 디바이스에 커스텀 인스트럭션 버튼이 없어서 생성할수가 없는데 어떤게 잘못된걸까요?
저도 이런 현상……
정답인지는 모르겠지만.. plane에서도 enable For - Front Camera 해제하고, Device - Conditional instruction 가져와서 연결하고 옵션 변경하니까 돼요
MP4를 PNG로 바꿔서 할때는 화면이 바로 나왔는데 JEPG를 PNG로 바꿔 시도한것은 화면이 기울어져서 나와요. 다른 조건은 다 같아요 ... 왜 그럴까요?
흠.. 글쎄요. 화면이 기울어진다는게 정확히 어떤 상황인지는 모르겠지만.. png 파일의 비율과 png 이미지를 삽입할 plane의 비율이 맞아야 해요. 그부분 한번 체크해보시고요, 그게 아니라 이미지 파일 포맷 때문에 에러가 나는 경우는 제가 겪어보지 않아서.. 잘 모르겠네요😂
안녕하세요. 좋은 영상 감사합니다. :) 캐릭터 대신 비디오 같은 것도 가능한가요.? 예를 들어 1~2분짜리 영상 같은 종류요.
네, 가능하지만 제약이 있을거에요. 비디오 소스를 그대로 임포트할 수가 없어서 png 시퀀스 파일로 변환해야할텐데 제한된 용량이 있기 때문에 짧은 영상만 가능하지 않을까 싶어요😭
AR 튜토리얼은 대부분 영어로 된게 많아서 이해하면서 보기 어려웠는데 차근차근 쉽게 알려주셔서 감사합니다!! 한가지 질문이 있는데 알려주신 방법대로 png 시퀀스로 애니메이션을 만들었는데 제가 만들고 싶은 애니메이션이 50초 정도로 좀 길어서 이미지가 많이 들어갔어요ㅜㅠㅜ 그래서 그런지 파일 크기 때문에 인스타그램으로 공유가 안되더라구요..ㅠㅠㅠㅠ 혹시 파일 용량을 줄일 수 있는 방법이 있을까요?!
png 이미지 압축 후에 새로 만들어도 용량에는 별 차이가 없네요..ㅠㅠ 이미지 수를 줄이는 방법밖에 없을까요..?
애니메이션 50초면.. AR로 연결하기에 분량이 꽤 긴 편이긴 해요. AR 환경에서 제공하기에 적합한 형태로 가공하면 어떨까 싶습니다..😅
@@Dev_and_Design 영상처럼 넘어가는 효과를 원했던건데 아무래도 AR로는 무리인것 같더라구요ㅠㅠㅠ 친절한 답변 감사합니다! 덕분에 처음으로 AR컨텐츠를 만들어봤어요!
영상 너무 감사합니다ㅜㅜ 시퀀스를 넣으니까 디바이스 미리보기 혹은 인스타그램 미리보기 전송이 안되는데 (전송되다가 중간에 게이지가 멈춤) 해결방법이 있을까요? 시퀀스는 600px정도 되고, 25fps, 120프레임 정도 크기입니다!
음.. 시퀀스 개수보다 필터 용량이 너무 크면 미리보기 전송이 아주 느릴수는 있는데.. 용량이 너무 커서 필터 등록이 안되기는 해도 미리보기는 일단 넘어가지던데.. 그래도 혹시 모르니까 용량 체크부터 해보시고 너무 크면 시퀀스 퀄리티를 더 낮춰보세요ㅜㅠ
필터 총 용량은 상단 메뉴 View - Show Asset Summary 열어서 확인할 수 있어요.
@@Dev_and_Design 감사합니다 선생님ㅜㅜ 에셋 확인해보니 제가 시퀀스를 여러개 옵션을 넣었는데 안쓰는 에셋들은 지우니까 잘되네요! 늦은시간에도 답변주셔서 너무 감사합니다😭
instagram이나 펫북 어카운트 없는 사람은 만들어진 다른 사람의 명함을 볼수없나요? 일반적인 큐알 코드로 쉽게 access 할수없나요?
Spark AR 이라는 플랫폼을 메타(구 페이스북)에서 만들어서 무료로 제공하는 이유가 인스타그램과 페이스북을 사용자들이 더 많이 활용하게 하려는 것입니다. 그래서 인스타그램, 페이스북 외에 다른 경로로는 콘텐츠를 퍼블리싱 할 수 없게 해놨어요. 일반적인 QR 코드로 인스타그램 링크에 도달하게는 할 수 있지만, 물론 그건 인스타그램 계정이 있어야만 합니다.
하지만 독립적인 AR 앱을 제작해서 퍼블리싱 한다고 해도 QR 코드로 연결을 하면 앱을 다운로드 받아서 설치를 해야만 그 콘텐츠를 볼 수 있을거에요.
하지만 방법이 없는건 아니고요, 웹 AR 이라는걸 활용하면 앱을 다운로드 받거나, 다른 SNS 계정을 거치지 않고 바로 웹페이지에서 AR을 보여줄 수가 있어요. 웹 AR은 아직 대중화 되지 않아서 기능에 제한이 좀 있겠지만 이미지 트래킹 정도는 충분히 구현 가능한 걸로 알고 있습니다. 웹 AR로 서치를 해보시면 유료이긴 하지만 코딩 없이 AR 콘텐츠를 제작할 수 있는 다양한 소프트웨어들이 있습니다. 나중에 기회가 되면 그런 플랫폼을 소개해드리는 콘텐츠도 만들어볼게요🤓
@@Dev_and_Design 네 기다릴께요... SNS 계정 없이 쉽게 콘텐츠 볼수있으면 좋겠어요
안녕하세요! 강의를 잘 보고 있는 Spark AR 초보입니다! 사진 스캔 전-> "사진을 스캔해보세요"문구가 뜨게하고
사진을 스캔하면 "사진을 스캔해보세요" 문구가 없어지고, "여기에 검지를 흔들어보세요" 문구가 나타나고
해당 위치에 검지를 흔들면 캐릭터가 나타나는 것을 해보고 싶은데, 이미지 트래킹과, 핸드 트래킹을 어떻게 하면 될까요?
Spark AR에서는 그런 안내 문구를 Instruction이라고 부르는데요, 아래 링크된 페이지 보면 기본적인 삽입 방법을 이해하실 수 있을 거예요. 좀 더 응용해서 사용하려면 유튜브에서 "Custom Instruction" 이런 키워드로 검색해보면 다양한 예시를 찾아보실 수 있을 거예요.
spark.meta.com/learn/articles/camera-settings/custom-instructions
근데 만드시려는 콘텐츠를 설명으로만 들었을 때는 Image Tracking과 Hand Tracking을 겹쳐서 사용하려는 것 같은데, Spark AR의 Image Tracking은 약간 불안정해서.. 이미지 스캔을 완료했더라도, 그 위에 '손'이 들어와서 카메라가 가려지면 Image Tracking으로 증강된 AR이 사라지게 될 거예요. 그래서 파트를 나눠서 콘텐츠를 구성해야 할 것 같고요, 또 한가지 문제점은 아직 Spark AR의 Hand Tracking은 각각의 손가락이나 손바닥, 손 등과 같은 디테일한 부위를 구분하지 못합니다. 따라서 검지를 따로 인식하지 못 하기 때문에 "검지를 흔들어 보세요" 라는 문구는 제공하지 않습니다. (물론 앞으로 업데이트가 될 수도 있긴 합니다만..아직은 없어요😭)
@@Dev_and_Design 친절한 답변 감사합니다! 하나만 더 여쭤볼게요! 답변해주신 내용을 참고해서 ar필터 제작을 완료하고 meta spark hub를 통해 인스타그램에 필터를 업로드 했습니다. Spark ar 파일을 업로드 할때 주의 문구가 뜨는 것도 없었고 "승인됨"이라고 해서 바로 테스트 하러 들어갔는데 로딩화면만 계속뜹니다.. 저는 갤럭시를 사용하고있고, 다른 분들도 ar필터 링크를 통해 들어가니 잘 작동이 된다고 합니다.
혹시 ios만 되고 Android는 안되는 건지 궁금합니다ㅜㅜ
@@user-ii9un4qw2h Spark AR은 iOS, 안드로이드 모두 지원하고 있고요, 기종에 대해서도 지원 범위가 꽤 넓어서 안되는 건 거의 본적 없는 거 같아요. 하나 의심해 볼 만한 건 Hand Tracking 기술이 새로 업데이트 된 기능이라서 사양이 낮은 기기에서는 작동이 안되나..? 하는 정도인데.. 제가 갤럭시 폰을 사용하지 않아서 잘 모르겠네요;
안녕하세요 디자이너님! 항상 잘 공부하고 있습니다. 좋은 영상 올려주셔서 감사합니다.
저는 현재 산업디자인과로 ar졸업전시를 가구로 트레킹해서 보여주려고 합니다.
혹시 3d (가구에) 트래킹 할 수 있을까요?
우선 지금은 이 유튜브 강의를 보면서 가구를 사진으로 찍어서 이미지트레킹을 하고 있습니다만
한 곳에 맞춰서 ar을 불러오게하기가 쉽지 않아서요.ㅜㅇㅜ
네 안녕하세요! 이 튜토리얼은 Image Tracking.. 그러니까 2D 이미지를 추적해서 그 위에 (2D or 3D) 오브젝트를 증강시키는 거에요. 지금 물어보신건 object Tracking 이라고 해서 입체적인 3D 오브제를 추적해서 그 위에 다른 오브젝트를 증강시키는 기술을 얘기하시는것 같은데요, 일단 Spark AR에서는 아직 object tracking 기술을 지원하고 있지 않습니다.😭 제가 알기로는 spark AR 뿐만이 아니라 직접 코드를 짜지 않는 이런 AR 플랫폼 중에 obejct tracking을 지원하는 곳은 아직은 없는걸로 알고 있어요. 그래서 굳이 입체물을 트래킹해야한다면 ARKit를 활용해서 코딩을 하셔야할거에요. 이와 관련된 공식 문서는 아래 링크 참고하세요!
developer.apple.com/documentation/arkit/content_anchors/scanning_and_detecting_3d_objects
@@Dev_and_Design 헉 그렇군요..ㅜㅜ 친절한 설명 감사합니다!
@@Dev_and_Design 혹시 입체물 트레킹 강의는.. 올려주실 계획은 없으신가요? >
@@mslee6999 그거는.. 제가 할 수 있는 영역은 아니고 저희 개발자님한테 부탁해보겠습니다🤣 안그래도 object tracking은 저희도 관심있는 주제이긴 해서 언젠가는 가능하겠지만.. 졸전 전에 올려드릴 수 있다고는 장담 못해요ㅜㅠ
음.. object tracking이 불가능할 경우 가구 옆 혹은 바닥에 qr코드나 특정 이미지 등을 그려놓고 증강시키려는 오브젝트를 불러올 수 있어요. object tracking보다 image tracking이 훨씬 쉽고 간단한 기술이기 때문에 실제 박물관이나 전시회 등에서 입체물에 AR을 증강시킬 때는 대부분 Image tracking을 이런식으로 활용하고 있습니다. 졸전 기획하실때 참고해보세요!
올려주신 영상 보며 따라해 봤는데 어떤 기기에서는 인식이 되고, 어떤건 안되는데 혹시 왜 그럴까요..?😢
앗 댓글을 지금 봤네요, 해결하셨는지 모르겠지만 참고할 만한 내용을 말씀드리자면.. 이 튜토리얼에서 사용하는 Image Tracking은 AR 기술 중에서 가장 쉽고 간단하게 구현되는 기능이라서 아주 오래된 기기에서도 웬만하면 다 사용 가능한 걸로 알고 있습니다. 다만 제가 경험해 본 바로는 Spark AR에서 제공하는 Image Tracking의 성능이 아주 훌륭한 편은 아니에요; 그래서 기기의 문제라기 보다는 Spark AR에서 지원하는 시스템의 문제가 아닐까..라고 예상됩니다.
좀 더 디테일하게 테스트해 보고 싶다면, 타겟 이미지를 더 복잡한 디테일이 있는 이미지로 교체해서 이미지를 인식 하는지 체크해 보세요!😊
@@Dev_and_Design 헉 친절하고 세세한 답변 너무 감사드립니다🥰 말씀해주신것 참고하여 다시 작업해보겠습니다☺️!!
인스타그램에 등록하고 이거를 어떻게 공유 할수 잇을까요?? QR코드를 연결 하나요??
효과를 등록하고 관리하는 Spark Hub에서 해당 효과로 바로 접속하는 링크를 얻을 수도 있고요, 인스타그램 앱에서 등록된 효과로 접속하면 공유할 수 있는 QR코드 이미지도 제공하고 있습니다!😉
타겟을 이미지로 잡고 ar증강을 동영상으로는 안돼나요?
아직 spark ar에서 video 포맷을 지원하지 않는걸로 알고있어요. 그래서 보통 비디오를 png 시퀀스로 변환해서 가지고 와서 사용합니다. 물론 spark ar에서 퍼블리싱 할 수 있는 용량이 4MB로 제한되어 있기 때문에 용량을 잘 체크하셔야 될 거에요!😭
이미지를 인식해서 3D모델링이 나타나게 어떻게 하나요?
3D 모델링이 등장하게 하는 건 더 쉬워요. 그냥 Target Tracker 아래에 임포트해 둔 3D 모델 에셋을 포함시켜 주기만 하면 됩니다!
혹시 sparkAR을 개인적으로 배울수 있을까요^^?
개인 대 개인으로 만나서 하는 수업에 대해서는 아직 계획이 없습니다😅
증강이미지에 버튼같은것은 적용안되나요?
네! 저도 궁금해서 방금 테스트 해봤는데요. 아주 잘 되더라고요ㅎㅎ object Tap 이라는 패치를 사용하시면 됩니다. 아래 링크 참고해보세요!!
sparkar.facebook.com/ar-studio/learn/tutorials/object-tap-patch#making-an-object-respond-to-a-tap
@@Dev_and_Design 아 스파크AR이네요 ㅜㅜ ARfoundation 인줄 알았어요ㅛ