윈도우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 스타일의 유저폼 버튼으로 동일하게 활용할 수 있으며, 각 버튼의 차이점은 아래 표와 같습니다.

윈도우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 스타일의 유저폼이 완성됩니다. 레이블 버튼을 클릭하면 '버튼을 클릭하였습니다.'라는 안내 메시지가 출력됩니다.

윈도우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

   

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 스타일의 유저폼이 완성됩니다.

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

유저폼을 한층 더 편리하게 사용하기 위해 TAB키의 이동 순서를 직접 지정할 수 있습니다.

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