Visualforce 페이지 만들기 및 편집

학습 목표

이 유닛을 완료하면 다음을 수행할 수 있습니다.

Visualforce 페이지가 무엇인지 설명하고 주요 속성을 설명할 수 있습니다.
조직의 기존 Visualforce 페이지를 나열하고 열 수 있습니다.
Developer Console을 사용하여 Visualforce 페이지를 만들고 편집할 수 있습니다.
편집기에서 Visualforce 태그 및 속성을 식별, 추가 및 사용자 정의할 수 있습니다.

참고

한국어로 학습하시겠어요? Trailhead playground에서 한국어로 실습 과제를 시작하고, 괄호 안에 제공된 번역을 사용해 탐색해 보세요. 영어 데이터를 기반으로 실습 과제 검증이 이루어지므로 영문으로 표시된 값만 복사해 붙여 넣습니다. 한국어 조직에서 실습 과제를 통과하지 못한 경우, (1) 로캘을 미국을 바꾸고 (2) 여기에 제시된 지침에 따라 언어를 영어로 바꾼 후 (3) "Check Challenge(과제 확인)" 버튼을 눌러 다시 진행해 보세요.

원하는 언어로 Trailhead 사용하기 뱃지를 확인해 현지화된 Trailhead 경험을 활용하는 방법에 대해 자세히 알아보세요.

Visualforce 페이지 만들기 소개

Visualforce 페이지는 애플리케이션 개발자를 위한 기본 빌딩 블록입니다. Visualforce 페이지는 표준 웹 페이지와 유사하지만 조직의 데이터에 액세스, 표시 및 업데이트할 수 있는 강력한 기능이 포함되어 있습니다. 페이지는 기존 웹 서버에서와 마찬가지로 고유한 URL을 통해 참조하고 호출할 수 있습니다.

Visualforce는 HTML과 유사한 태그 기반 마크업 언어를 사용합니다. 각 Visualforce 태그는 페이지 섹션, 목록 보기 또는 개별 필드와 같은 크게 나누거나 잘게 나눈 사용자 인터페이스 구성 요소에 해당합니다. Visualforce는 거의 150개의 기본 제공 구성 요소를 자랑하며 개발자가 고유한 구성 요소를 만들 수 있는 방법을 제공합니다. Visualforce 마크업은 HTML 마크업, CSS 스타일 및 JavaScript 라이브러리와 자유롭게 혼합할 수 있으므로 앱의 사용자 인터페이스를 구현하는 방법에 상당한 유연성을 제공합니다.

Salesforce에서 다양한 방법으로 Visualforce 페이지를 보고, 만들고, 편집할 수 있습니다. 또한 Salesforce API를 사용하여 Visualforce 페이지를 만들고 수정할 수 있으므로 다양한 외부 도구를 사용할 수 있습니다.

Developer Console에서 Visualforce 페이지 만들기

Developer Console을 사용하여 다른 강력한 Lightning Platform 개발 도구에 액세스하여 Visualforce 페이지를 만들고 편집할 수 있습니다. Developer Console에는 자동 구문 강조 표시, 태그 쌍 일치, 자동 제안 및 자동 완성, 스마트 들여쓰기 및 마크업 및 코드 편집에 유용하게 사용할 수 있는 기타 여러 기능이 있습니다. 동일한 페이지에서 잠시 작업하거나 사용자 정의 컨트롤러가 있는 Visualforce 페이지, 더 길고 복잡한 코드 등을 작업할 경우 사용할 수 있는 최고의 기본 제공 도구입니다.

Developer Console에서 Visualforce 페이지를 만들려면 다음 단계를 따르세요.

Your Name(이름)에서 Developer Console을 열거나 빠른 액세스 메뉴( )를 엽니다. Developer Console이 새 창에서 열립니다.
File(파일) | New(새로 만들기) | Visualforce Page(Visualforce 페이지)를 클릭합니다.
새 페이지의 이름으로 HelloWorld를 입력한 다음 OK(확인)를 클릭합니다. Developer Console에서 비어 있는 새 Visualforce 페이지가 열립니다.
편집기에서 페이지에 대해 다음 마크업을 입력합니다.
```
<apex:page>
    <h1>Hello World</h1>
</apex:page>
```
File(파일) | Save(저장)를 클릭합니다.
새 페이지를 보려면Preview(미리보기)를 클릭합니다. 렌더링된 페이지가 새 창에서 열립니다. 이 페이지 미리보기에는 Salesforce 스타일이 없는 페이지가 표시됩니다. Lightning Experience 컨텍스트에서 페이지를 보려면 기본 Lightning Experience 브라우저 창으로 돌아갑니다. 브라우저의 JavaScript 콘솔을 열고 다음 코드를 입력합니다. pageName을 여러분의 페이지 이름으로 변경하는 것을 잊지 마세요. 이 JavaScript는 Lightning Experience navigateToURL 이벤트를 실행하며, 클래식 /apex/PageName URL에 입력하는 것과 동일합니다.

$A.get("e.force:navigateToURL").setParams({"url": "/apex/pageName"}).fire();

편집기에서 페이지에 텍스트를 추가하고 저장합니다. 미리보기 창은 페이지를 저장할 경우 변경 사항을 반영하도록 자동으로 새로 고쳐집니다. 앞으로 저장 지침을 생략할 것이지만 단계 사이에 페이지를 저장해야 합니다.

Developer Console

File(파일) | Open(열기)을 클릭하여 기존 Visualforce 페이지 목록을 봅니다. 페이지를 두 번 클릭하여 엽니다. Apex 클래스 및 트리거, Visualforce 구성 요소 등과 같은 다른 Salesforce 엔티티를 열 수도 있습니다.

자동 제안을 사용하여 속성 추가

Visualforce 구성 요소의 특성을 설정하여 해당 동작을 사용자 정의합니다. 자동 제안을 사용하여 Visualforce 구성 요소 태그에 속성과 값을 빠르게 추가합니다.

Visualforce 태그에 속성을 추가하고 수정하려면 다음 단계를 따르세요.

HelloWorld 페이지에서 > 기호를 닫기 직전에 오프닝 <apex:page> 태그 내부를 클릭합니다. 공백을 입력한 다음 s를 입력합니다. 자동 제안은 입력한 내용에 대해 가능한 완성 목록을 표시합니다. 추가 문자를 입력하면 제안 목록이 일치하는 값으로만 줄어듭니다.
sidebar가 선택될 때까지 아래쪽 화살표 키를 누릅니다. Return(반환)을 누릅니다. sidebar(사이드바) 속성이 마크업의 <apex:page> 태그에 추가되고 자동 제안이 가능한 값을 표시합니다.
화살표 키를 사용하거나 f를 입력하여 false를 선택하고 Return(반환)을 누릅니다. 코드는 다음과 같아야 합니다.
```
<apex:page sidebar="false">
    <h1>Hello World</h1>
</apex:page>
```
변경 내용을 저장합니다.
추가하려면 위의 단계를 반복하여 showHeader="false”를 <apex:page> 태그에 추가하고 변경 사항을 저장합니다. 코드는 다음과 같아야 합니다.
```
<apex:page sidebar="false" showHeader="false">
    <h1>Hello World</h1>
</apex:page>
```

자동 제안은 사용하려는 구성 요소 및 각 속성이 무엇인지와 그 기능을 이미 알고 있는 경우에 유용합니다. 특히 Visualforce를 알아보는 동안 표준 구성 요소 참조를 참조하여 어떤 구성 요소가 있는지, 어떤 역할을 하는지, 어떻게 사용하고 사용자 정의하는지 알아볼 수도 있습니다.

추가 기본 정보

Salesforce Classic에서는 sidebar 속성과 showHeader 속성의 기본값이 true입니다. 하지만 Lightning Experience과 Salesforce 모바일 앱에서는 이러한 속성의 값이 재정의되며 항상 false로 설정됩니다. Lightning Experience 헤더를 표시하지 않을 수 있는 방법은 없습니다.

페이지에는 글꼴, 크기 등에 대한 Salesforce 선택 항목을 일치시킬 수 있는 일부 Salesforce 스타일 시트가 여전히 포함되어 있습니다. 모든 Salesforce 출력을 억제하려면 standardStylesheets="false”를 추가하여 스타일도 제거합니다.

페이지 구조를 형성하기 위해 구성 요소 추가 및 구성

Visualforce 페이지에 구성 요소를 추가하고 정렬하여 페이지 구조를 작성합니다.

다음 단계에 따라 페이지에 새 Visualforce 태그를 추가하고 페이지 구조를 만드는 데 사용합니다.

HelloWorld 페이지에서 <apex:pageBlock> 구성 요소를 “Hello World” 텍스트 아래에 추가합니다. <apex:pageBlock>은 페이지의 관련 항목을 그룹화하는 구조화된 사용자 인터페이스 요소입니다. 자동 제안을 사용하여 추가하고 제목 속성을 “A Block Title”로 설정합니다.
<apex:pageBlockSection> 구성 요소를 <apex:pageBlock> 구성 요소에 추가합니다. 제목 속성을 “A Section Title”로 설정합니다. <apex:pageBlockSection>은 페이지에 구조와 계층을 추가하는 또 다른 구성 요소입니다. 렌더링할 때 <apex:pageBlockSection> 요소는 섹션 제목을 제외한 모든 요소를 숨기기 위해 사용자가 요소를 축소할 수 있습니다.
일부 텍스트를 <apex:pageBlockSection> 구성 요소 내에 추가합니다(예: "I’m three components deep!"). 코드는 다음과 같아야 합니다.
```
<apex:page>
    <h1>Hello World</h1>
    <apex:pageBlock title="A Block Title">
        <apex:pageBlockSection title="A Section Title">
            I'm three components deep!
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>
```
최상위 제목, 제목이 있는 접을 수 있는 섹션 및 일부 일반 텍스트가 있는 일부 구조를 표시하는 페이지가 있습니다.
첫 번째 이후에 다른 <apex:pageBlockSection>을 추가하고 제목을 “A New Section”으로 설정합니다. 첫 번째 <apex:pageBlockSection>과 마찬가지로 구성 요소의 본문에 일부 텍스트를 추가합니다. 코드는 다음과 같아야 합니다.
```
<apex:page>
    <h1>Hello World</h1>
    <apex:pageBlock title="A Block Title">
        <apex:pageBlockSection title="A Section Title">
            I'm three components deep!
        </apex:pageBlockSection>
        <apex:pageBlockSection title="A New Section">
            This is another section.
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>
```
<apex:pageBlockSection> 태그를 <apex:pageBlock> 태그 내에 중첩하는 방법을 참고하세요. 상위 <apex:pageBlock> 태그 내에 삽입하지 않고 하위 <apex:pageBlockSection> 태그를 사용할 수 없습니다.

페이지 만들기, 페이지에 속성 및 구성 요소 추가, 구성 요소를 함께 배열하여 페이지에 구조와 디자인을 제공하는 것을 포함하여 페이지를 함께 구성하는 모든 기본 사항을 살펴봤습니다.

추가 정보 알아보기

Developer Console은 Salesforce 조직 내에서 Lightning Platform 개발을 위한 가장 강력하고 완벽한 기능을 제공하는 도구입니다.

Salesforce에서 Visualforce 페이지를 만들고 편집하는 두 가지 다른 기본 제공 방법이 있습니다.

개발 모드 "빠른 수정" 및 바닥글을 사용하면 새 페이지를 빠르게 만들거나 기존 페이지를 짧게 편집할 수 있습니다. 빠른 변경을 위해 또는 짧은 페이지를 만들어 앱 페이지에 통합하기 전에 백지에서 새 코드를 테스트하려는 경우에 좋습니다.
Quick Find(빠른 찾기) 상자에 Visualforce Pages를 입력한 다음 Visualforce Pages(Visualforce 페이지)를 선택하여 Setup(설정)에서 사용할 수 있는 설정 편집기는 가장 기본적인 편집기이지만 Developer Console 또는 개발 모드 바닥글에서 사용할 수 없는 페이지 설정에 대한 액세스를 제공합니다.

가볍고 확장 가능한 코드 편집기인 Visual Studio Code를 사용하여 Visualforce 페이지를 개발할 수도 있습니다. Visual Studio Code용 Salesforce 확장 프로그램에는 Salesforce Platform에서 개발하기 위한 도구가 포함되어 있습니다. 개발 조직(스크래치 조직, Sandbox 및 DE 조직), Apex, Aura 구성 요소 및 Visualforce로 작업하기 위한 기능을 제공합니다.

페이지에 추가한 <apex:pageBlock> 및 <apex:pageBlockSection> 구성 요소는 Salesforce Classic 인터페이스 요소의 사용자 인터페이스와 일치하는 사용자 인터페이스를 렌더링합니다. <apex:pageBlockSectionItem> 및 <apex:pageBlockButtons>를 포함하여 플랫폼 비주얼 스타일을 일치시킬 수 있는 다른 구성 요소도 있습니다. 어떤 항목이 <apex:pageBlockSection> 내에 중첩되었는지 추측할 수 있나요?

Visualforce에는 다양한 사용자 인터페이스 요소와 동작을 제공하는 거의 150개의 기본 제공 구성 요소가 포함되어 있습니다. Visualforce 표준 구성 요소 참조는 이러한 구성 요소를 나열하고 구성 요소 사용 방법에 대한 예제 코드를 포함하여 해당 속성을 문서화합니다.

리소스

Salesforce 도움말: Visualforce 페이지 만들기
Salesforce 도움말: Developer Console 기능
Salesforce 도움말: Visualforce용 편집기 사용
Visualforce 개발자 가이드: Visualforce 개발용 도구
Visualforce 개발자 가이드: 표준 구성 요소 참조
Visual Studio Code용 Salesforce 확장
Salesforce 개발자 블로그: 브라우저로 Visualforce 개발

도움말 검색

더 알아보기

Visualforce 페이지 만들기 및 편집

학습 목표

참고

Developer Console에서 Visualforce 페이지 만들기

자동 제안을 사용하여 속성 추가

추가 기본 정보

리소스