엑셀 유저폼, 윈도우10 스타일로 깔끔하게 만드는 방법 :: 퀵 VBA 11강

미리 작성된 VBA 마스터 코드를 사용한 윈도우10 스타일의 깔끔한 유저폼 제작 방법을 단계별로 알아봅니다.

# VBA

작성자 :
오빠두엑셀
최종 수정일 : 2022. 10. 10. 21:22
URL 복사
메모 남기기 : (12)
엑셀 윈도우10 유저폼 만들기 썸네일_R
by

윈도우10 스타일 - VBA 유저폼 만들기 :: 퀵 VBA 11강

윈도우10 유저폼 만들기 목차 바로가기
  1. 예제파일 다운로드
  2. 이번 강의에 사용된 VBA 마스터 코드
  3. 윈도우10 스타일 유저폼 - 레이블버튼 vs 텍스트상자 버튼
  4. 윈도우10 스타일 유저폼 #1 - 레이블 버튼
  5. 윈도우10 스타일 유저폼 #2 - 텍스트상자 버튼
  6. TAB키 이동을 위한 컨트롤 우선순위 정하기
영상강의
동영상 재생이 안 되시나요? - 유튜브에서 시청 하기

  1. VBA 기본 유저폼 제작
    00:32
  2. VBA 기본 유저폼의 한계
    04:12
  3. 모던 유저폼을 만드는 2가지 방법
    04:48
  4. 모던 유저폼 만들기#1 - 레이블
    05:43
  5. 모던 유저폼 버튼 스타일 적용
    08:48
  6. 버튼 클릭 이벤트 추가
    12:28
  7. 레이블 버튼을 사용할 경우 제한사항
    13:36
  8. 모던 유저폼 만들기#2 - 텍스트상자
    14:10
  9. 모던 유저폼 버튼 스타일 적용하기
    16:17
  10. 텍스트 상자 버튼 사용시 주의사항
    17:40
  11. 유저폼 실행 명령문 추가하기
    19:42
큰 화면으로 보기

예제파일 다운로드

오빠두엑셀의 강의 예제파일은 여러분을 위해 자유롭게 제공하고 있습니다.

  • [퀵VBA] 엑셀 윈도우10 스타일 유저폼 만들기
    예제파일
    다운로드
  • [퀵VBA] 엑셀 윈도우10 스타일 유저폼 만들기
    완성파일
.

라이브 강의 전체영상도 함께 확인해보세요!

위캔두 회원이 되시면 매주 오빠두엑셀에서 진행하는 라이브강의 풀영상을 확인하실 수 있습니다.

이번 강의에 사용된 VBA 마스터 코드

이번 강의에서 사용한 윈도우10 스타일 모던 유저폼 VBA 마스터 코드입니다. 아래 설명에 따라 명령문을 유저폼 안에 복사하여 붙여넣기 한 뒤, 실제 사용 중인 버튼 이름으로 명령문을 수정하면 누구나 손쉽게 윈도우10 스타일의 깔끔한 유저폼을 만들 수 있습니다.

윈도우10 스타일 기본 명령문

아래 코드를 유저폼에 추가한 뒤, btnXXX, btnYYY을 유저폼에서 사용중인 실제 버튼 이름으로 변경합니다. 버튼 이름을 쉼표(,)로 구분해서 입력합니다.

'아래 코드를 유저폼에 추가한 뒤, "btnXXX, btnYYY"를 버튼이름을 쉼표로 구분한 값으로 변경합니다.
Private Sub UserForm_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
Dim ctl As Control
Dim btnList As String: btnList = "btnXXX, btnYYY" ' 버튼 이름을 쉼표로 구분하여 입력하세요.
Dim vLists As Variant: Dim vList As Variant
If InStr(1, btnList, ",") > 0 Then vLists = Split(btnList, ",") Else vLists = Array(btnList)
For Each ctl In Me.Controls
    For Each vList In vLists
        If InStr(1, ctl.Name, Trim(vList)) > 0 Then OutHover_Css ctl
    Next
Next
End Sub
 
'커서 이동시 버튼 색깔을 변경하는 보조명령문을 유저폼에 추가합니다.
Private Sub OnHover_Css(lbl As Control): With lbl:   .BackColor = RGB(211, 240, 224):    .BorderColor = RGB(134, 191, 160): End With: End Sub
Private Sub OutHover_Css(lbl As Control): With lbl:   .BackColor = &H8000000E:    .BorderColor = &H8000000A: End With: End Sub

윈도우10 스타일 버튼 명령문

아래 코드를 유저폼에 추가한 뒤, btnXXX를 유저폼에서 사용중인 실제 버튼 이름으로 변경합니다. 각 버튼마다 하나씩 적용합니다.

'유저폼에 추가한 버튼에 개수만큼 아래 명령문을 유저폼에 추가한 뒤, btnXXX를 버튼 이름으로 변경합니다.
Private Sub btnXXX_Exit(ByVal Cancel As MSForms.ReturnBoolean)
OutHover_Css Me.btnXXX
End Sub
 
Private Sub btnXXX_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
OnHover_Css Me.btnXXX
End Sub
 
Private Sub btnXXX_Enter()
OnHover_Css Me.btnXXX
End Sub

윈도우10 스타일 유저폼 - 레이블버튼 vs 텍스트상자 버튼

엑셀 VBA 유저폼은 윈도우98 디자인의 버튼만 제공합니다. 따라서 윈도우10 디자인의 버튼을 제작하려면 '레이블' 또는 '텍스트상자'를 사용해야 합니다.

두 방법 모두 동일하게 윈도우10 스타일의 유저폼 버튼으로 사용할 수 있으며, 각 버튼의 차이점은 아래 표와 같습니다.

항목 레이블 버튼 텍스트상자 버튼
TAB키 동작 이동 불가 TAB키로 이동 가능
마우스 커서 기본 마우스 커서 편집 커서 (속성에서 변경가능)
마우스 클릭 Label_Click () TextBox_MouseDown()
키보드 입력 없음 TextBox_KeyDown()
추가 설정 - 1. 잠금(Locked) 속성을 TRUE로 변경
2. 마우스 커서 속성을 fmMousePointerArrow (화살표)로 변경
공통 설정
  • 배경색(Back Color) : 흰색 (&H80000005&)
  • 테두리색(BorderStyle) : 활성테두리 (&H8000000A&)
  • 테두리 포함(Border Style) : fmBorderStyleSingle (테두리 포함)
  • 특수 효과(Special Effect) : fmSpecialEffectFlat (효과 없음)

윈도우10 스타일 유저폼 #1 - 레이블 버튼

첫번째로 윈도우10 스타일 유저폼에 들어가는 레이블 버튼을 제작합니다.

  1. VBA 편집기를 실행합니다. (단축키 : ALT + F11) VBA 편집기가 실행되면, 삽입 - 사용자 정의폼을 클릭하여 새로운 유저폼을 추가합니다.

    사용자 정의 폼 삽입
    매크로편집기 - 삽입 - 사용자 정의폼을 추가합니다.
  2. 도구상자에서 '레이블'을 선택한 뒤, 유저폼 위로 새로운 레이블을 추가합니다.
    [Tip] 도구상자가 안 보일경우, 보기 - 도구상자를 클릭하면 도구상자를 활성화 할 수 있습니다.

    레이블 추가
    유저폼 위에 새로운 레이블을 생성합니다.
  3. 레이블을 선택한 뒤, 키보드 F4키를 누르면 속성창이 나타납니다. 이후 레이블의 각 속성을 아래와 같이 변경합니다.
    [Tip] 유저폼 배경을 흰색으로 변경하면 더욱 깔끔한 유저폼을 만들 수 있습니다.

    항목 설정
    (이름) btnLabel1
    BackColor &H8000000E& (텍스트반전)
    BorderColor &H8000000A& (활성테두리)
    BorderStyle 1-fmBorderStyleSingle
    Caption 레이블버튼
    Font 글꼴 : 맑은 고딕
    크기 : 12
    Height 20
    TextAlign 2-fmTextAlignCenter (가운데 정렬)

    유저폼 레이블 설정 변경
    테이블에 적힌 값 대로 레이블의 속성을 변경합니다.
  4. 레이블을 더블클릭하여 유저폼 모듈로 이동합니다. 이후 아래 명령문을 복사하여 붙여넣기 합니다. 
    Private Sub btnLabel1_Click()
MsgBox "버튼을 클릭하였습니다."
End Sub
 
'유저폼에 추가한 버튼에 개수만큼 아래 명령문을 유저폼에 추가한 뒤, btnLabel1를 버튼 이름으로 변경합니다.
Private Sub btnLabel1_Exit(ByVal Cancel As MSForms.ReturnBoolean)
OutHover_Css Me.btnLabel1
End Sub
 
Private Sub btnLabel1_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
OnHover_Css Me.btnLabel1
End Sub
 
Private Sub btnLabel1_Enter()
OnHover_Css Me.btnLabel1
End Sub
 
'아래 코드를 유저폼에 추가한 뒤, "btnXXX, btnYYY"를 버튼이름을 쉼표로 구분한 값으로 변경합니다.
Private Sub UserForm_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
Dim ctl As Control
Dim btnList As String: btnList = "btnLabel1" ' 버튼 이름을 쉼표로 구분하여 입력하세요.
Dim vLists As Variant: Dim vList As Variant
If InStr(1, btnList, ",") > 0 Then vLists = Split(btnList, ",") Else vLists = Array(btnList)
For Each ctl In Me.Controls
    For Each vList In vLists
        If InStr(1, ctl.Name, Trim(vList)) > 0 Then OutHover_Css ctl
    Next
Next
End Sub
 
'커서 이동시 버튼 색깔을 변경하는 보조명령문을 유저폼에 추가합니다.
Private Sub OnHover_Css(lbl As Control): With lbl:   .BackColor = RGB(211, 240, 224):    .BorderColor = RGB(134, 191, 160): End With: End Sub
Private Sub OutHover_Css(lbl As Control): With lbl:   .BackColor = &H8000000E:    .BorderColor = &H8000000A: End With: End Sub
  5. 키보드 F5키를 눌러 유저폼을 실행하면 윈도우10 스타일의 유저폼이 완성됩니다. 레이블버튼을 클릭하면 '버튼을 클릭하였습니다.'라는 안내메시지가 출력됩니다.

    엑셀 유저폼 레이블 버튼 완성 GIF
    레이블 버튼 추가가 완료되었습니다.

윈도우10 스타일 유저폼 #2 - 텍스트상자 버튼

윈도우10 스타일 유저폼으로 레이블 버튼을 사용하면 텍스트 상자보다 적은 단계의 설정으로 이용할 수 있다는 장점이 있습니다. 하지만 레이블 버튼은 키보드 TAB 키로 이동이 불가능하므로, 사용자가 반드시 마우스로 버튼을 클릭해야만 합니다.

따라서, 키보드 TAB키로 버튼을 이동하거나 키보드의 엔터키를 눌러 버튼을 클릭할 수 있도록 하려면 텍스트상자 버튼을 사용해야 합니다.

  1. VBA 편집기에서 삽입 - 사용자 정의폼을 클릭하여 새로운 유저폼을 추가합니다.

    사용자 정의 폼 삽입
    매크로편집기 - 삽입 - 사용자 정의폼을 추가합니다.
  2. 도구상자에서 '텍스트상자'을 선택한 뒤, 유저폼 위로 새로운 텍스트상자를 추가합니다.

    엑셀 유저폼 텍스트박스 추가
    유저폼 위에 새로운 텍스트 상자를 추가합니다.
  3. 텍스트상자를 선택한 뒤, 키보드 F4키를 누르면 속성창이 나타납니다. 이후 텍스트상자의 각 속성을 아래와 같이 변경합니다.
    [Tip] 유저폼 배경을 흰색으로 변경하면 더욱 깔끔한 유저폼을 만들 수 있습니다.

    항목 설정
    (이름) btnText1
    BackColor &H8000000E& (텍스트반전)
    BorderColor &H8000000A& (활성테두리)
    BorderStyle 1-fmBorderStyleSingle
    Font 글꼴 : 맑은 고딕
    크기 : 12
    Height 20
    Locked True
    MousePointer 1 - fmMouserPointerArrow (일반 커서)
    SelectionMargin True
    SpecialEffect 0 - fmSpecialEffectFlat (효과 없음)
    TextAlign 2-fmTextAlignCenter (가운데 정렬)
    Value 텍스트상자 버튼

    엑셀 유저폼 텍스트박스 설정 변경
    위 테이블의 적힌 값으로 텍스트상자의 속성을 변경합니다.
  4. 완성된 텍스트상자를 복사한 뒤, 아래에 붙여넣기 합니다. 이후 붙여넣기 된 텍스트 상자의 이름을 변경합니다.
    항목 설정
    (이름) btnText2

    유저폼 텍스트박스 추가
    텍스트 상자를 복사하여 하나 더 추가한 뒤, 이름을 btnText2로 변경합니다.
  5. 텍스트상자를 더블클릭하여 유저폼 모듈로 이동합니다. 이후 아래 명령문을 복사하여 붙여넣기 합니다. 
    Private Sub btnText1_KeyDown(ByVal KeyCode As MSForms.ReturnInteger, ByVal Shift As Integer)
If KeyCode = 13 Then MsgBox "버튼을 클릭하였습니다."
End Sub
 
Private Sub btnText1_MouseDown(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
MsgBox "버튼을 클릭하였습니다."
End Sub
 
Private Sub btnText2_KeyDown(ByVal KeyCode As MSForms.ReturnInteger, ByVal Shift As Integer)
If KeyCode = 13 Then MsgBox "버튼을 클릭하였습니다."
End Sub
 
Private Sub btnText2_MouseDown(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
MsgBox "버튼을 클릭하였습니다."
End Sub
 
'유저폼에 추가한 버튼에 개수만큼 아래 명령문을 유저폼에 추가한 뒤, btnText2를 버튼 이름으로 변경합니다.
Private Sub btnText2_Exit(ByVal Cancel As MSForms.ReturnBoolean)
OutHover_Css Me.btnText2
End Sub
 
Private Sub btnText2_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
OnHover_Css Me.btnText2
End Sub
 
Private Sub btnText2_Enter()
OnHover_Css Me.btnText2
End Sub
 
'유저폼에 추가한 버튼에 개수만큼 아래 명령문을 유저폼에 추가한 뒤, btnText1를 버튼 이름으로 변경합니다.
Private Sub btnText1_Exit(ByVal Cancel As MSForms.ReturnBoolean)
OutHover_Css Me.btnText1
End Sub
 
Private Sub btnText1_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
OnHover_Css Me.btnText1
End Sub
 
Private Sub btnText1_Enter()
OnHover_Css Me.btnText1
End Sub
 
'아래 코드를 유저폼에 추가한 뒤, "btnXXX, btnYYY"를 버튼이름을 쉼표로 구분한 값으로 변경합니다.
Private Sub UserForm_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
Dim ctl As Control
Dim btnList As String: btnList = "btnText1,btnText2" ' 버튼 이름을 쉼표로 구분하여 입력하세요.
Dim vLists As Variant: Dim vList As Variant
If InStr(1, btnList, ",") > 0 Then vLists = Split(btnList, ",") Else vLists = Array(btnList)
For Each ctl In Me.Controls
    For Each vList In vLists
        If InStr(1, ctl.Name, Trim(vList)) > 0 Then OutHover_Css ctl
    Next
Next
End Sub
 
'커서 이동시 버튼 색깔을 변경하는 보조명령문을 유저폼에 추가합니다.
Private Sub OnHover_Css(lbl As Control): With lbl:   .BackColor = RGB(211, 240, 224):    .BorderColor = RGB(134, 191, 160): End With: End Sub
Private Sub OutHover_Css(lbl As Control): With lbl:   .BackColor = &H8000000E:    .BorderColor = &H8000000A: End With: End Sub
  6. 키보드 F5키를 눌러 유저폼을 실행하면 윈도우10 스타일의 유저폼이 완성되었습니다.

    엑셀 유저폼 텍스트상자 버튼 완성 GIF
    윈도우10 스타일의 유저폼이 완성되었습니다.

TAB키 이동을 위한 컨트롤 우선순위 정하기

유저폼을 보다 편리하게 사용하기 위하여 TAB키의 이동 순서를 정할 수 있습니다.

  1. 유저폼을 우클릭한 뒤, [탭 순서]로 이동합니다.

    유저폼 탭 순서 변경
    유저폼을 우클릭하여 탭 순서로 이동합니다.
  2. 컨트롤의 탭키 이동 순서를 변경한 뒤 [확인] 버튼을 눌러 마무리합니다.

    유저폼 탭 순서 저장
    버튼의 탭 이동 순서를 변경할 수 있습니다.
5 7 투표
게시글평점
12 댓글
Inline Feedbacks
모든 댓글 보기
12
0
여러분의 생각을 댓글로 남겨주세요.x