Alert를 커스터마이징 하기 위해 Modal 만들어보기

가끔 프런트엔드 부분 개발을 진행하다 보면

사용자가 잘못된 접근을 했을 때나 아니면 성공적으로 무언가를 완료했을 때 등등

Alert나 Confirm을 통해 사용자와 상호작용을 해야 할 때가 있습니다.

하지만 일반적으로 제공해 주는 Alert와 Confirm은 따분하기 그지없는 디자인으로

이쁜 디자인의 웹을 개발하려고 하는 개발자의 심기를 건드리는 부분인데요.

 

다행히도 마음 아파할 필요 없이 우리가 직접 Alert, Confirm을 제작하면 됩니다.

 

제작하기 전에 먼저 생각해야 할 점은 Alert, Confirm과 같은 모달창의 특성은

배경화면 위에 존재하는 요소이며 해당 요소가 존재할 때는 배경화면과의 상호작용은 금지되고

오직 Modal하고만 상호작용 할 수 있는 구조가 되어야 합니다.

 

 

 

배경화면 위에 또 다른 요소 만들기

 

See the Pen position1 by SiHyun (@dltlehfld) on CodePen.

HelloWorld로 도배된 화면이 있는데 여기서 HelloWorld라는 문구 위에 또 다른 문구를 추가해 보겠습니다.

See the Pen Untitled by SiHyun (@dltlehfld) on CodePen.

그저 Position이라는 속성값을 absolute로 바꿨을 뿐인데 새로 추가한 '안녕하세요'라는 문구는

기존의 'Hello World'와 겹쳐지는 구조가 됐습니다.

 

기본적으로 태그들은 Position속성으로 Static이 기본값인데

Static값은 문서의 흐름순서대로 요소가 배치되기 때문에 position어트리뷰트가 기본값으로 적용된

'Hello World'문구는 순서대로 나열된 걸 확인할 수 있습니다.

 

하지만 '안녕하세요'같이 Postion이 absolute로 설정되어 있으면 자체가 독립적인 요소가 되어

부모요소 레이아웃 상관없이 화면 어디든 자유롭게 배치할 수 있습니다.

See the Pen position4 by SiHyun (@dltlehfld) on CodePen.

이렇게 부모 div요소 내부에 존재함에도 불구하고

div영역인 검은색네모 안에서만 배치되는 게 아닌 left, right, top, bottom속성을 통해서

화면 어디든지 배치할 수 있는 독립적인 요소가 됩니다.

 

이런 특성 때문에 배경화면 위에 요소가 하나 더 존재하는(겹쳐지는) Modal구조를 만들 수 있습니다.

 

이제 배경화면 위에 존재하게 만드는 법은 알았지만 아직 한 가지 문제점이 있습니다.

 

Modal창이 존재할 때는 Modal외부와는(배경) 상호작용하게 할 수 없게 만들어야 하는데

어떻게 해야 할까요?

 

 

 

배경화면과의 상호작용 금지하기

 

See the Pen position3 by SiHyun (@dltlehfld) on CodePen.

방법은 간단합니다.

Modal창의 크기를 화면 최대크기로 만들어주면 됩니다. 위 예시처럼 Modal을 화면 최대크기로 만들면

배경화면에 있는 button요소들은 Modal이 배경화면 색의 투명도를 조절해서 요소들은 보이지만

클릭은 사실상 Modal에 가려진 구조이기 때문에 작동하지 않는 걸 확인할 수 있습니다.

 

최대크기로 만들기 위해서는 먼저 {left: 0; top: 0;}속성을 추가해서 배경을 가리는 Modal이 왼쪽상단에 위치하도록 만든 뒤

{width: 100vw, height: 100vw} --> 화면 최대크기로 설정해주면됩니다.

See the Pen modal layout by SiHyun (@dltlehfld) on CodePen.

 

 

 

 

Modal 만들기

 

지금까지는 Modal을 만들기 전 준비운동(?)이라고 할 수 있는 과정을 거쳤습니다.

이제 진짜 Modal을 만들 차례입니다.

 

필자의 생각으로는 일반적으로 Modal같은 경우는 화면 정중앙에 배치되고

어떠한 동작(스크롤을 올리고 내리는 등)에도 흔들리지 않는 고정된 요소가 되어야 한다고 생각합니다.

See the Pen modal8 by SiHyun (@dltlehfld) on CodePen.

정중앙에 배치하는 방법은 

1. top: 50%, left: 50%, transform: translate(-50%, -50%)

2. margin: auto  등등 굉장히 많지만

필자는 개인적으로 flex디스플레이를 사용해서 위 예시처럼 중앙 정렬 하는 방법을 애용합니다.

{
  display: flex;
  flex-direction: 내부 요소들이 배치될 원하는 방향(행, 열);
  justify-content: center;(수평 정렬)
  align-items: center;(수직 정렬)
}

그리고 어떠한 동작에도 고정된 레이아웃을 유지할 수 있도록 Position도 Fixed로 설정했습니다.

 

이제 다 끝났습니다.

Modal창 내부에 원하는 요소들을 넣기만 하면 됩니다.

필자 같은 경우는 가장 상단에 해당 웹 사이트의 상징과 같은 이미지를 넣고 그다음 부분은 Modal의 내용

마지막 부분은 Modal과의 상호작용을 담은 버튼이 존재하는 구조를 선호합니다.

See the Pen modal10 by SiHyun (@dltlehfld) on CodePen.

필자가 선호하는 구조대로 만들어 보았습니다.

이제 내부 Button, Image, Content 요소들도 자신이 원하는 크기와 스타일대로 커스터마이징 하면 됩니다.

 

(※ 실제로 필자가 제작하는 웹사이트에도 해당 Modal구조를 사용중입니다.)

진짜 마지막으로 한 가지 더 중요한 부분이 있습니다.

 

Modal이 존재할 때는 뒷부분 배경화면과는 완전히 독립적인 형태가 되어야 하기 때문에

배경화면 자체 또한 스크롤이 불가능한 상태가 되어 오직 Modal에만 포커스가 된 상태가 되는 게 훨씬 보기에 좋습니다.

See the Pen modal last by SiHyun (@dltlehfld) on CodePen.

 

방법은 HTML구조에 대한 이해도가 있다면 굉장히 간단합니다.

 

뒷 배경 전체 레이아웃을 담당하는(가장 상위 부모에게 --> body태그) 태그에게 Overflow속성으로 Hidden을 주게 되면

화면에 넘치는 부분(한 화면에 담지 못하는)에 대해서 가려버리기 때문에 스크롤 자체가 발생하지 않습니다.

 

 

 

마지막으로

지금까지 Modal을 만들어 봤습니다.

Modal의 특성을 잘 이용하면 Alert, Confirm같은 화면 외에도

사용자와 연속적인 상호작용이 필요할 때, 특정 로직을 강제적으로 유도할 때 등등

굉장히 유용하게 쓰일 수 있는 곳이 많다고 생각합니다.

 

굉장히 미흡한 필자의 포스팅에도 불구하고

끝까지 읽어주셔서 감사합니다. Modal 제작에 조금이라도 보탬이 되었으면 합니다 😉