⇒ Chat GPT에게 window 객체가 무엇이고, 초보자들에게 window methods를 알려주려고 하면 무엇을 알려주는 게 좋을지 질문

⇒ 답변을 토대로, 나도 크롬에서 해당 코드 실행

Window Popup

1. window 객체 소개

개념: 'window' 개체는 브라우저에 열려 있는 창을 나타내며 웹페이지의 JavaScript 코드에 대한 전역 개체 역할을 한다고 설명합니다. 여기에는 브라우저 창을 제어하고 웹 페이지의 DOM(문서 개체 모델)에 액세스하는 속성과 메서드가 포함되어 있습니다.

2. 창 열기 및 닫기

• window.open(): 새 브라우저 창이나 탭을 엽니다. 코드 예:

  javascriptCopy code
  // Opens a new window and assigns it to a variable
  let newWindow = window.open('https://www.example.com', '_blank');

  이유: 새 브라우저 창이나 탭에서 외부 웹사이트나 웹페이지를 여는 방법을 보여줍니다. 이는 현재 페이지를 떠나지 않고 사용자를 리디렉션하거나 추가 정보를 여는 데 유용합니다.
  
• window.close(): 현재 창을 닫습니다. 코드 예:

  javascriptCopy code
  // Closes the newly opened window
  newWindow.close();

  이유: 메시지를 표시하거나 작업을 완료한 후 등 다양한 시나리오에서 유용할 수 있는 프로그래밍 방식으로 창을 닫는 방법을 보여줍니다.
  

3. 창 크기 및 위치 조작

• window.resizeTo() 및 window.resizeBy(): 창 크기를 변경합니다. 코드 예:

  javascriptCopy code
  // Resizes the window to 800x600 pixels
  window.resizeTo(800, 600);

  이유: 창 크기를 제어하는 방법을 알려줍니다. 이는 웹페이지가 다양한 해상도에서 어떻게 보이는지 테스트하는 데 특히 유용할 수 있습니다.
  
• window.moveTo() 및 window.moveBy(): 화면에서 창 위치를 변경합니다. 코드 예:

  javascriptCopy code
  // Moves the window to coordinates (100, 100)
  window.moveTo(100, 100);

  이유: 사용자 경험을 향상시키거나 데모 목적으로 특정 시나리오에서 사용할 수 있는 브라우저 창 위치를 변경하는 방법을 설명합니다.
  

4. 타이머 작업

• setTimeout() 및 clearTimeout(): 지정된 시간 지연 후에 코드를 실행합니다. 코드 예:

  javascriptCopy code
  // Displays an alert after 3 seconds
  let timerId = setTimeout(() => alert('Hello!'), 3000);

  이유: 비동기 실행의 개념과 메시지 표시 또는 일시 중지 후 코드 실행과 같은 작업을 지연하는 방법을 소개합니다.
  
• setInterval() 및 clearInterval(): 각 호출 사이에 고정된 시간 지연을 두고 코드를 반복적으로 실행합니다. 코드 예:

  javascriptCopy code
  // Logs a message to the console every 2 seconds
  let intervalId = setInterval(() => console.log('Repeating'), 2000);

  이유: 웹페이지 일부 업데이트, 간단한 애니메이션 생성 등 반복 작업을 설정하는 방법을 보여줍니다.
  

5. 경고, 프롬프트 및 확인 대화 상자

• alert(): 지정된 메시지가 포함된 경고 대화 상자를 표시합니다. 코드 예:

  javascriptCopy code
  // Displays an alert dialog
  alert('This is an alert!');

  이유: 메시지를 표시하여 사용자에게 알리거나 디버그하는 가장 간단한 방법입니다.
  
• confirm(): 확인 및 취소 버튼이 있는 대화 상자를 표시합니다. 코드 예:

  javascriptCopy code
  // Asks for user confirmation
  if (confirm('Are you sure?')) {
    console.log('User clicked OK.');
  } else {
    console.log('User clicked Cancel.');
  }

  이유: 작업을 진행하기 전에 사용자로부터 간단한 예/아니요 대답을 얻는 데 유용합니다.
  
• prompt(): 사용자에게 입력을 요청하는 대화 상자를 표시합니다. 코드 예:

  javascriptCopy code
  // Asks for the user's name
  let userName = prompt('What is your name?', '');
  console.log(`User's name is ${userName}`);

  이유: 간단한 방식으로 사용자로부터 입력을 수집할 수 있으므로 개인화된 인사말이나 웹 애플리케이션의 입력에 유용합니다.
  

팝업을 많이 쓰면 어떻게 될까? (Chat GPT)

웹 애플리케이션에서 팝업을 자주 사용하면 여러 가지 부정적인 결과를 초래할 수 있으며, 이는 사용자 경험과 웹 사이트의 효율성 모두에 영향을 미칩니다. 과도한 팝업 사용과 관련된 주요 문제는 다음과 같습니다.

1. 사용자 성가심: 팝업은 사용자에게 매우 방해가 되고 성가실 수 있습니다. 특히 너무 자주 또는 예기치 않게 나타나는 경우에는 더욱 그렇습니다. 이는 웹사이트에 대한 불만과 부정적인 인식으로 이어져 사용자가 사이트를 떠나게 만들 수 있습니다.
2. 사용자 작업 방해: 팝업은 사용자의 작업 흐름을 방해하여 의도한 작업을 완료하기 어렵게 만들 수 있습니다. 이러한 중단은 사용자가 정보를 검색하거나 특정 작업을 수행하는 웹사이트에서 특히 문제가 될 수 있습니다.
3. 사용성 문제: 모바일 장치에서는 화면 크기가 작기 때문에 팝업이 훨씬 더 방해가 될 수 있습니다. 올바르게 렌더링되지 않거나 닫기가 어려워 사용자 경험이 저하될 수 있습니다.
4. 광고 차단기 및 브라우저 제한: 팝업으로 인한 광범위한 성가심으로 인해 많은 사용자가 팝업 창을 자동으로 차단하는 광고 차단기를 설치했습니다. 또한 최신 웹 브라우저에는 팝업 차단 기능이 내장되어 있습니다. 결과적으로 팝업의 의도된 콘텐츠가 사용자에게 도달하지 못할 수도 있습니다.
5. 접근성에 부정적인 영향: 특히 접근성을 염두에 두고 구현되지 않은 경우 팝업은 장애가 있는 사용자에게 어려울 수 있습니다. 이로 인해 해당 사용자가 콘텐츠에 액세스하거나 웹사이트 기능을 사용하는 것이 어려워져 제외될 수 있습니다.
6. SEO 처벌: Google과 같은 검색 엔진은 방해가 되는 전면 광고와 팝업을 사용하는 웹사이트에 처벌을 가할 수 있습니다. 특히 사용자가 모바일 장치에서 콘텐츠에 쉽게 액세스하는 기능을 방해하는 경우 더욱 그렇습니다. 이는 사이트의 검색 엔진 순위에 부정적인 영향을 미칠 수 있습니다.
7. 전환율 감소: 팝업은 리드를 포착하거나 정보를 제공하는 데 효과적인 도구일 수 있지만, 팝업을 과도하게 사용하면 실제로 전환율이 감소할 수 있습니다. 팝업이 쏟아지면 사용자가 사이트에 참여하거나 원하는 작업을 완료할 가능성이 낮아질 수 있습니다.
8. 보안 문제: 과도한 팝업 사용은 때때로 악성 웹사이트나 피싱 시도와 연관될 수 있습니다. 사용자는 악성 코드에 대한 두려움 때문에 팝업을 경계하게 되었고, 이로 인해 합법적인 팝업을 신뢰하고 상호 작용할 가능성이 낮아졌습니다.

이러한 문제를 완화하려면 팝업을 신중하게 사용하고 팝업이 사용자 경험에 가치를 제공하는지 확인하는 것이 중요합니다. 팝업을 구현할 때 사용자 상황을 고려하고, 팝업을 닫는 명확하고 쉬운 방법을 제공하고, 접근성 및 디자인에 대한 모범 사례를 준수하세요.

느낀점

window 팝업과 같은 경우 많이 사용하면 안 좋을 것 같다는 생각이 든다.

특정 웹 사이트를 구경해보면, 팝업을 사용하더라도 별도의 커스텀 팝업을 만들지 window 팝업을 사용하는 경우는 극히 드문 것 같다.

아마도, 위 목차에 나와 있는 것처럼 보안 문제 등이 있으니까 그런 것이라고 생각이 든다. (물론, UI적인 측면에서도 각 CSS와 부합하게 디자인 하기 위한 측면도 충분히 고려해야 할 것이다.)

하지만, 실제 서비스가 아닌 개인 프로젝트를 할 때에는 window 팝업을 충분히 사용해봐야 겠다는 생각이 든다.