inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

애플 웹사이트 인터랙션 클론!

브라우저 리사이즈 대응

고기를 잡는 법이 궁금합니다!

255

영수

작성한 질문수 2

2

안녕하세요 선생님! 좋은 강의 감사히 잘 듣고있습니다

강의의 내용을 나름 차근차근 잘 따라가고, 선생님과 완전히 같은 페이지가 아닌, 저 나름의 동영상과 사진을 이용해서

저의 페이지를 만들며 강의를 수강하고 있습니다! 마침 선생님의 강의 내용에 해당 질문이 적합하여 질문드리고자 하는 것이 있습니다

선생님의 페이지와 마찬가지로, 제가 만든 페이지에서도 브라우저를 resize한 경우 scene3의 애니메이션이 딱 맞지 않게 작동한다던가,

모바일 환경에서 위에서 아래로는 정상적으로 스크롤 되지만 아래에서 위로 스크롤 하는 경우 애니메이션이 정상적으로 작동하지 않는다던가,

아이패드 환경에서 사진이 갑자기 사라졌다가 나타나는 등 수도 없이 많은(…ㅠㅠ) 오류가 발생하곤 하는데요, 선생님의 경우처럼

rectStartY가 초기화 되지 않아서 이런 오류가 발생하는구나, 라는 식의 사고 전개가 초심자라 그런지 잘 되지 않습니다. 코드를 올리고, 이러이런 현상이 발생하는데 어떻게 해결할까요 라는 질문도 좋은 질문이겠지만, 언젠가는 저 스스로 이런 문제를 해결하고자 하는 마음이 있는데, 어떤 방식으로 원인을 찾아 나가는 것이 좋은 접근일까요?

질문이 장황하여 죄송합니다. 정리하자면 원하는 틀을 만든 후에, 다양한 환경에서 테스트 할때, 어떤 문제가 발생하는지 까지는 파악 할 수 있으나, 그 문제가 왜 발생하였는지를 찾는데에 어려움을 겪고 있는데, 어떤 방식으로 접근해야 각 문제의 발생원인을 찾는데에 도움이 되는지 여쭤보고 싶습니다! 좋은 강의 감사합니다 ㅎㅎ

클론코딩 웹 디자인 svg 인터랙티브-웹 HTML/CSS javascript

답변 1

4

1분코딩

한마디로 말씀드리기 어려운 문제이기는 한데요~
먼저 대놓고 오류가 나는 경우라면, 콘솔에 출력된 오류 메시지를 토대로 원인을 찾아나아가다 보면 찾으실 수 있을거에요. 물론 그것도 처음에는 쉽지 않은 일이긴 하지만^^;

오류를 찾기 어려운 경우는 에러가 아니라 그냥 내가 의도하지 않은 동작이 될 경우인데요, 이건 에러도 아니기 때문에 누가 힌트를 주는 것도 아니어서 원인을 찾기가 까다롭지요^^;
먼저 어떤 성격의 오류인지 파악을 하는게 중요한데요, 예를들어 어떤 메시지가 눈에 보이지 않는다면 개발자 도구 검사를 통해 메시지 자체가 안들어온 것인지(데이터의 문제인지), 아니면 메시지는 들어왔는데 UI가 틀어져서 눈에만 안보이는 것인지.. 이런 식으로 일단 큰 줄기에서 파악을 합니다. 관련해서 떠오르는 원인이 있다면 그것부터 확인해 보시고, 떠오르는게 딱히 없다면 관련된 속성들 몇가지의 값을 변경해가면서 한땀 한땀 찾을 수 밖에 없답니다. 이런 문제같은 경우에는 딱 정답이 있다기보다, 여러 경험을 통해 배경지식이 많이 쌓일수록 해결 원인을 찾아내는 것이 수월해지는 것 같아요.
예를들어 아이패드에서 어떤 요소가 갑자기 사라진다면, 일단 내가 눈으로 확인할 수 있도록 그 요소의 위치를 텍스트로 출력해보는 거죠. 그리고 거기 출력되는 수치를 보고, 가로 방향이 문제인지 세로 방향이 문제인지, 세로 방향이 문제라면 이 요소의 세로 위치(y값)에 영향을 주는 요인들을 하나하나 체크해보는 식으로..

이게 명쾌한 답변이 어려워서 좀 주절주절 적은 느낌이 나네요^^; 계속 경험을 쌓아가시다보면, 머릿속에 있는 지식들이 결합되어서 원인을 예측하시는 능력이 향상이 될 거라고 생각됩니다.
좋은 질문해주셨는데 답변이 명쾌하지 않은 느낌이라 죄송합니다^^;;;

이미지 배경 문의

0

65

1

[크로스브라우징] safari에서 동영상 영역 미노출

0

106

1

항상 궁금했는데 크림슨 컬러 선택하셨을때 활용했던 사이트 좀 알려주세요~

0

109

2

vue강의는안하시나요?!

0

100

1

스크롤 속도에 따른 messageA_opacity_out

0

115

1

drawImage(objs.videoImages[sequence], 0, 0); error

0

88

1

선생님 캔버스 width 크기는 이미지 크기에맞게 해줘야하나요?

0

126

0

선생님 안녕하세요. 혹시 메인개발(?)분야가 뭔지 궁금합니다.

0

206

1

React에서 load 상태를 어떻게 감지할 수 있을까요?

0

678

1

[섹션7-3: 버그수정 2] tempYOffset 오류

0

194

1

스크롤할 때 캔버스로 하신 이유가 있으신가요? 그냥 성능 떄문에 캔버스로 하신건가요?

0

312

2

게속 오류떠서 글 작성해봐요....

0

505

2

Vanilla JavaScript로 SPA 만드는 자료 혹은 선택 기준을 추천해주실 수 있으신가요?

1

488

1

특정 타이밍 스크롤 애니메이션 적용하기 섹션 수강중입니다.

0

455

2

[#svg, #이미지프레임과 텍스트 싱크] 스크롤 값에 움직이는 svg path, 이미지프레임과 텍스트 싱크 맞추는 것, 2가지 질문이 있습니다.

0

451

2

페이지가 처음 로딩 되었을 때 애니메이션 처리가 되지 않는 느낌입니다

0

430

1

섹션2 번째, opacity=0 되지 않고 잔상이 남습니다.

0

533

1

원래 쿼리셀렉터에서는 띄워쓰기 하면안되나요?

0

593

2

라이브러리 질문

1

412

2

translateY대신 애플에서 사용한 것 처럼 matrix로 scale의 크기를 주려고 하는데

0

409

1

[스크롤 높이 세팅] scrollHeight값이 3990아닌 4645로만 나오는데 뭐가 문제일까요? ㅠㅠ

0

597

2

scrollLoop 함수 질문

0

475

2

도메인 웹호스팅시 이미지가 안 뜨는데 누가 좀 알려주세요ㅠㅜ

0

1233

2

load 이벤트시 첫 비디오 이미지가 뜨네요.

0

504

2