기획 관련 용어 파헤치기: 이걸 뭐라고 부르지? #1편

배경 흐리게 처리해주세요, 팝업 띄우고 뒤에 클릭 못하게 해주세요. 라고 했던 기획자라면

딤드(dimmed) 처리와, 모달(modal) 팝업에 대해 알아보자.

---

※ 현재 모바일 가독성은 고려하고 있지 않습니다.

※ PC 버전을 이용해주세요.

---

 

회사를 옮기고 나서 제일 크게 느끼는 부분은 '용어' 차이다.

실무에서 가장 많이 사용하는 (약 한 달 간 가장 많이 접한)

용어들을 위주로 정리해보려고 한다.

 

나는 뼛속까지 기획자인가보다 싶을 때가 있는데....

방금 전 위의 괄호를 회색 글씨 + 취소선을 입히면서

글자 색을 먼저 바꿨더니 이후의 취소선은 검정색인걸 보며

'아 이건 바꾸는 게 좋을 것 같은데' 라는 생각이 들고 만 지금이 그렇다.

---

이걸 뭐라고 불러요?

 

1. 딤드(dimmed) 처리

영어 단어 'dim'은 '어둑한, 흐릿한'의 의미를 가진다.

단순히 비활성화된 것과 다르게 사용자가 임의로 변경할 수 없도록 음영 처리를 하는 경우가 있다.

딤드 처리 예시, URL 부분이 딤드 처리 되어있다.

지금 작성하고 있는 글의 발행 화면이다.

[기본] 항목의 공개, 공개(보호), 비공개 설정은

바꿀 수 있기 때문에 단지 현재 비활성화 되어 있을 뿐 마우스 오버 시 활성화된다.

 

그렇지만, [URL]은 자동으로 설정되는 항목이기 때문에,

사용자에게 보여지긴 하지만 바꿀 수 없다.

 

보여지지만 바꿀 수 없는 항목을 사진과 같이 '회색' 등으로 처리할 때

'딤드 처리 해주세요.'라고 할 수 있다.

 

---

2. 모달(modal) 팝업

팝업의 종류는 생각보다 많다.

아래 블로그가 참고가 되었다. 

팝업의 종류; 팝업, 알럿, 레이어 팝업, 모달, 토스트 팝업

 

팝업(pop-up)은 말 그대로 pop! 하고 튀어나오는 새창을 말한다.

요새는 많이 없지만, 90년대 생 이전으로는 아마 '팝업 창 허용하기' 알람을 많이 봤을 것 같다.

 

모달 팝업은, 팝업 창이 새 창이 아닌 브라우저 내에서 나오면서

해당 레이어 외에 뒷 배경은 동작하지 않는 경우를 말한다.

(참고: 구글은 다이얼로그, 애플은 모달리티라고 표현합니다.)

 

※뒷 배경을 동작할 수 없다는 이유로 인해, 애플에서는 모달 창을 최소화하라고 한다.

 

 

홈텍스 화면, 인증서 로그인 시 뒤의 브라우저는 선택할 수 없다.

국세청 홈텍스 화면을 가져와보았다.

(메뉴는 선택 가능하지만) 공동·금융인증서를 선택하면

[인증서 선택창]이 나오면서 뒤의 브라우저는 선택할 수 없다.

간편인증 등으로 로그인 방법을 변경하려면 해당 팝업을 종료해야만 한다.

 

이 경우 [인증서 선택창]을 '모달 팝업'이라고 부를 수 있고,

뒤의 화면은 '딤드 처리'되었다고 할 수 있다.

 

 

💡깨알 정보 공유!

 

기획자라면 개발자와의 소통은 필수다.

'부모창'과 '자식창'의 개념 정도는 알고 있으면 좋은데,

 

이런 레이어 팝업을 사용할 경우,

원래의 브라우저는 '부모창'

새로 뜬 창은 '자식창'이라고 부른다.

(개발자들은 다 그렇게 부르더라구~)

 

---

사실 이전 회사에서는 다양한 고객사를 상대로 하기 때문에,

'뒤에 배경 좀 뿌옇게 해주세요.'

'이 팝업은 뜨고나면 뒤에는 선택 안되게 해주세요.'

라고 하는 경우가 많았다.

 

어디까지나 회사by회사이고,

같이 사용하는 사람들에게도 인지도가 있어야 소통이 된다.

용어를 잘 안다고 기획을 잘하는건 아니니까!

 

그렇지만 더 아는 것은 무조건 좋고

구구절절 말하는 것보다

'모달 팝업 띄우고 뒤의 부모창은 딤드 처리할게요.'가 멋있지 않나!