현재 Apigee Edge 문서가 표시되고 있습니다.
Apigee X 문서로 이동 정보
7월 27일 월요일에 새로운 버전의 Apigee Edge 통합 포털이 출시됩니다.
새로운 기능 및 개선사항
이 섹션에서는 이번 출시 버전의 새로운 기능과 개선사항을 설명합니다.
접근성 및 반응성 개선
다음은 이 버전에 구현된 접근성 및 응답성 개선사항입니다.
- 키보드 탐색: 이제 키보드를 사용하여 머리글 및 바닥글 탐색 메뉴, SmartDocs 측면 탐색, 앱 목록, 앱 보기, API 카드를 탐색할 수 있습니다.
- 포커스 관리: 헤더 탐색 메뉴와 SmartDocs의 측면 탐색 메뉴를 사용하여 탐색하면 탐색 작업 후 페이지의 첫 번째
<H1>
로 포커스가 이동합니다. - 라이브 지역: 텍스트 필터링으로 인한 API 목록 변경사항이 이제 스크린 리더를 사용하는 사용자에게 보고됩니다.
- HTML 제목의 의미 체계 사용: 이제 모든 텍스트가 의미상 적절한 HTML 태그에 포함됩니다. 이제 적절한 계층적 제목 구조가 포털 전체에서 사용됩니다.
- <H1>을 단독으로 사용: 이제 각 페이지에 하나의
<H1>
만 있으므로 스크린 리더가 페이지 콘텐츠에 관한 가장 유용한 설명을 쉽게 식별할 수 있습니다. - 스타일 대문자 사용: 시각적 강조로 전체 대문자를 사용하는 것은 실제 텍스트가 아닌 CSS에만 적용됩니다.
- DOM의 논리적 순서 지정: 앱 만들기 및 수정 페이지의 작업 버튼이 양식 상호작용이 완료될 때 논리적인 순서로 활성화될 수 있도록 DOM의 양식 요소 아래로 이동했습니다.
- 시각적 요소의 텍스트 설명: 라벨, 대체 텍스트, 버튼 텍스트의 사용이 개선되어 모두 스크린 리더를 사용한 탐색이 개선되었습니다.
- 색상 대비: 제품 전반의 여러 부분에서 WCAG AA 대비 요구사항을 충족하도록 색상 대비가 높아졌습니다. 불충분한 색상 대비를 방지하기 위해 API 목록의 API 제목을 이미지 아래로 이동했습니다.
- 양식 유효성 검사: 앱 만들기 및 수정 페이지에서 양식 제출 버튼이 더 이상 사용 중지되지 않으며 활성화하여 양식을 검증할 수 있습니다. 이제 앱 만들기 및 수정 페이지의 확인된 양식 입력란에 유효성 검사 오류에 대한 텍스트 설명이 포함됩니다.
- 반응성: 이제 SmartDocs를 제외한 모든 페이지에 적용되는 최대 너비가 적용됩니다. 이제 SmartDocs 탐색이 좁은 휴대전화 크기의 화면에서 작동합니다. 앱 만들기 및 수정 페이지가 이제 좁은 화면에 더 잘 반응합니다.
포털에 영향을 미칠 수 있는 DOM 변경사항
특히 다음과 같은 사항을 고려하세요.
- CSS 재정의를 사용하여 탐색 메뉴 (머리글 및 바닥글) 및 페이지 제목의 스타일이 지정 (또는 숨김)됨: 이제 페이지 콘텐츠의 최대 너비가 적용됩니다. 탐색 메뉴와 페이지 헤더를 브라우저 창의 가장자리까지 확장하기 위해 Apigee는
:before
유사 요소의 스타일을 지정했습니다. 자세한 내용은 탐색 메뉴 및 페이지 헤더의 기본 색상 재정의를 참고하세요. - 브라우저 창의 가장자리까지 확장되는 배경이 있는 페이지 요소 (전체 화면 배경 이미지 제외): 반응성을 개선하기 위해 페이지 콘텐츠의 최대 너비가 제한되었으며, 이로 인해 맞춤 페이지 내에서 이전의 전체 너비 패널이 제한될 수 있습니다. 새로운 최대 너비 설정을 사용하는 방법에 관한 자세한 내용은 포털 페이지에서 전체 너비 패널 만들기를 참고하세요.
- CSS 선택자로 특정 HTML 제목 수준을 타겟팅하여 텍스트 스타일을 수정: 특정 콘텐츠에 적용되는 제목 수준이 변경되었습니다. 예:
<H1> → <H2>
이 버전의 세부 변경사항 목록을 검토하여 영향을 받는 콘텐츠를 정확히 파악하세요. - 포털 테마 편집기에서 흰색 또는 매우 밝은 색상이 '보조 색상'으로 선택됨: 보조 색상은 흰색 배경에서 잘 보이지 않는 탐색 요소에 사용됩니다. 액세스 가능한 보조 색상을 선택한 다음 필요한 경우 특정 상황에서 맞춤 Scs로 재정의하는 것이 좋습니다.
- 텍스트 내 링크의 스타일 지정: 이제 링크 스타일을 더욱 쉽게 지정할 수 있습니다. 기존 스타일과 상호작용하는 방식을 이해하려면 아래 변경사항을 참고하세요.
- Home 뷰 카드의 콘텐츠 영역에 있는 2픽셀 테두리가 CSS 재정의를 사용하여 스타일이 지정되거나 숨겨짐:
<mat-card-actions>
에서 이 테두리가<mat-card-content>
에서 상단 테두리로 이동했습니다.
세부 변경사항 요약
다음 섹션에서는 이번 버전에 구현된 세부 변경사항을 카테고리별로 요약하여 설명합니다.
포털 전체 변경사항
포털 전반의 변경사항은 아래에 요약되어 있습니다.
- 다음 변수는 더 이상 사용되지 않습니다.
$layout-horizontal-padding
$layout-main-content-horiz-padding
$layout-header-horiz-padding
$layout-context-bar-horiz-padding
- 기본 콘텐츠 영역의 최대 너비와 기본 콘텐츠 영역의 최소 가로 패딩을 제어할 수 있는 새로운 변수가 있습니다.
$layout-main-content-max-width
$layout-horizontal-min-padding
기본 탐색 메뉴 변경사항
기본 탐색 메뉴의 변경사항은 다음과 같습니다.
- 이제
<img>
로고가 데스크톱과 모바일 화면 크기에서 모두<a>
로 래핑됩니다. - 사용자 드롭다운 버튼이 이제
<a>
가 아닌<button>
입니다.
링크 스타일 변경사항
이제 텍스트 내 표준 링크 <a>
에 기본적으로 밑줄이 표시되고 마우스 오버 시 배경 색상 (테마 설정 '보조 색상'에 따름)이 표시됩니다.
404 페이지 변경사항
404 페이지의 변경사항은 아래에 요약되어 있습니다.
- '지금 로그인'이
<H1>
대신<H2>
(으)로 변경되었습니다. - 설명 텍스트가 이제
<H1>
이(가) 아닌<H2>
입니다.
API 페이지
API 페이지의 변경사항은 아래에 카테고리별로 요약되어 있습니다.
- API 검색/필터 입력 카드:
- 이제
<mat-card-content class="mat-card-content">
가 검색 API 카드 제목 및 입력을 래핑합니다. - 이제
<H2>
가class="api-doc-filter-title"
대신class="mat-subheading-1"
를 사용합니다. - 이제
<mat-form-field>
에서appearance="outline"
를 사용합니다. - 입력 앞의
<mat-form-field>
에 검색 아이콘이 추가되었습니다."<mat-icon matPrefix>search</mat-icon>"
- ARIA 라벨 및 컨트롤 참조가 입력에 추가됨
- 이제
- API 목록 메시지가 비어 있음:
- 'API를 찾을 수 없음'이 이제
<H1>
이 아닌<H2>
입니다. - 설명이 이제
<H2>
대신<H3>
입니다.
- 'API를 찾을 수 없음'이 이제
- API 카드 목록:
'검색과 일치하는 API 없음'이 이제
<H1>
이(가) 아닌<H2>
(으)로 변경되었습니다. - API 카드:
>div class="api-doc-card-content-image-gradient"></div>
님이 삭제되었습니다.- API 제목이
<div>
이 포함된 이미지에서 나와<div>
이미지 바로 다음에 오는<div class="api-doc-card-content-title"></div>
로 이동되었습니다. - API 제목이 이제
<H1>
이(가) 아닌<H2>
입니다.
앱 목록:
- 빈 상태:
- '시작하기'가 이제
<H1>
에서<H2>
으로 변경되었습니다. - 빈 상태 안내가 이제
<H2>
가 아닌<H3>
입니다.
- '시작하기'가 이제
- 목록:
- '내 앱'이
<H1>
에서<H2>
(으)로 변경되었습니다. - 이제
<mat-row>
이<a>
에서 왜곡됩니다.
- '내 앱'이
앱 페이지 만들기 및 수정
앱 만들기 및 수정 페이지의 변경사항이 아래에 요약되어 있습니다.
<div class="app-buttons">
을 <form>의 끝으로 이동하고<div class="form-buttons-sticky-container">
로 대체했습니다..app-layout-section
클래스의 모든 사용이.details-layout-section
로 변경되었습니다..app-layout-section-title
클래스의 모든 사용이.details-layout-section-title
로 변경되었습니다.- 모든 섹션 제목이 이제
<div>
이(가) 아닌<H2>
(으)로 변경되었습니다. .app-layout-section-content
클래스의 모든 사용이.details-layout-section-content
로 변경되었습니다.- API 목록은 더 이상 전환 스위치가 있는 API 카드 목록이 아닙니다 (API 목록과 유사). 대신 API의 표입니다.
- 콜백 URL 입력이 새로운 섹션으로 이동되었습니다.
- 이제 저장 버튼에서 매트 돌출 버튼 스타일과 기본 색상 배경이 사용됩니다
- 테이블이 이제
.app-table-wrapper
클래스를 사용하는<div>
에 래핑됩니다. - 이제 표 헤더에서
<thead>
래퍼를 사용합니다. - 이제 테이블 본문에서
<tbody>
래퍼를 사용합니다. - 표 열 너비를 설정하는 데 더 이상
[style.width]
이 사용되지 않습니다. - 이제 표 내의 모든
<a>
태그가<button
를 대신 사용합니다.
팀 목록
'팀' 목록의 변경사항은 아래에 요약되어 있습니다.
- 빈 상태:
- '시작하기'가 이제
<H1>
이(가) 아닌<H2>
(으)로 변경되었습니다. - '공유 앱 소유권을 관리하기 위한 팀 만들기'가
<H2>
이(가) 아닌<H3>
(으)로 변경되었습니다.
- '시작하기'가 이제
- 목록:
'팀'의 이름이
<H1>
에서<H2>
(으)로 변경되었습니다.
팀 페이지 만들기 및 수정
팀 만들기 및 수정 페이지의 변경사항이 아래에 요약되어 있습니다.
<form>
에서.teams-form
클래스가.details-form
로 대체되었습니다.<div class="teams-buttons">
를<form>
의 끝으로 이동하고<div class="form-buttons-sticky-container">
로 대체했습니다..teams-layout-section
클래스의 모든 사용이.details-layout-section
로 변경되었습니다..teams-layout-section-title
클래스의 모든 사용이.details-layout-section-title
로 변경되었습니다..teams-layout-section-content
클래스의 모든 사용이.details-layout-section-content
로 변경되었습니다.<div class="team-apps-container">
님이<table class="team-apps">
주변에 추가됨
SmartDocs
SmartDocs 인터페이스의 변경사항은 아래에 요약되어 있습니다.
- 측면 탐색:
- 측면 탐색이 Angular Material 구성요소로 완전히 다시 작성되었습니다.
- 측면 탐색 제목이 이제
<div>
이(가) 아닌<H2>
입니다. - 이제 탐색 항목에서 포털 테마 편집기의 '보조 색상' 대신 포털의 기본 텍스트 색상을 사용합니다.
- 이제 측면 탐색 메뉴에서 선택되거나 포커스가 설정된 항목, 마우스 오버된 항목에서 텍스트와 배경에 각각 포털 테마 편집기 '보조 색상'의 어두운 변형과 밝은 변형이 사용됩니다.
- 콘텐츠:
- '경로 매개변수' 및 '헤더 매개변수'와 같은 많은 부제목이 이제
<H3>
가 아닌<H2>
입니다. - 개요 페이지의 스키마 항목이 이제
<H2>
이 아닌<H3>=>
입니다.
- '경로 매개변수' 및 '헤더 매개변수'와 같은 많은 부제목이 이제
기존 홈페이지에 접근성 개선사항 추가
종료 포털이 있는 경우 아래 설명된 대로 탐색 가능한 카드의 새로운 접근성 향상 기능을 활용하려면 홈페이지를 수정해야 합니다.
<mat-card>
컨테이너에서href=""
를 삭제합니다.<mat-card-header>
내의 카드 제목에<H1>
대신<H2>
를 사용합니다.- 카드 제목 내
<h2>
에서는<a class="navigable-content" href="href-name">
로 텍스트를 래핑하고 href-name를 카드 탐색에 적절한 값으로 설정합니다.
또는 다음 카드 템플릿을 사용할 수 있습니다.
<mat-card class="home-page-card quick-start">
<mat-card-header class="home-page-card-header" color="primary">
<mat-icon class="home-page-card-header-icon">
check_circle
</mat-icon>
<h2 class="home-page-card-header-text">
<a class="navigable-content" href="page-route">
Card heading
</a>
</h2>
</mat-card-header>
<mat-card-content class="home-page-card-content">
<p class="home-page-card-content-text">
Extra content
</p>
</mat-card-content>
</mat-card>
</p>
탐색 메뉴와 페이지 헤더의 기본 색상 재정의
탐색 메뉴와 페이지 헤더를 브라우저 창의 가장자리까지 확장하려면 다음의 헤더 탐색 메뉴와 유사한 고급 테마 편집기를 사용하여 탐색 메뉴와 페이지 머리글의 맞춤 스타일을 추가합니다.
// Override use of the primary color for header navigation bar background-color
.nav-header .mat-toolbar {
color: #fff // color for navigation text
// Use the :before pseudo element to style the background of full-width bars
// (header and footer navigation bars and page headers)
&:before {
background-color: #000; // background color for header navigation bar
}
}
앱의 API 관리를 위한 절차 업데이트
통합 포털의 앱에서 API를 관리하기 위한 사용자 상호작용이 변경되었습니다. 특히 앱을 관리할 때 API 섹션에서 사용자가 앱의 API에 대한 액세스를 사용 설정하거나 중지하려면 각각 전환 버튼 대신 또는 를 클릭해야 합니다.
해당하는 경우 앱 페이지에서 API를 관리하는 방법을 설명하는 포털의 절차를 업데이트합니다. 자세한 내용은 앱에서 API 관리를 참고하세요.
수정된 버그
다음은 이번 출시 버전에서 수정된 버그입니다. 이 목록은 주로 자신의 지원 티켓에서 제기한 문제가 수정되었는지 확인하는 사용자를 위한 것입니다. 모든 사용자에게 자세한 정보를 제공하기 위한 목적은 아닙니다.
문제 ID | 구성요소 이름 | 설명 |
---|---|---|
161269688 | 통합 포털 |
Apigee Hybrid에서 애셋 썸네일이 잘못 렌더링됨 이제 썸네일이 저작물 페이지에 올바르게 표시됩니다. |
161295683 | 통합 포털 |
앱 설명을 설정하지 않고 서버 실패 이제 앱에 설명 (선택 필드)이 정의되지 않은 경우 앱을 만들 수 있습니다. |
160898967 | 통합 포털 |
포털의 방문 페이지가 제대로 스크롤되지 않음 이제 포털 방문 페이지를 스크롤할 수 있습니다. |
160613314, 159197760, 158643196, 158069283, 158069066, 140154942 |
통합 포털 |
기타 보안 수정사항 |
158593496 | 통합 포털 |
V1 포털에서 개발자 앱을 만들 수 없음 V1 포털에서 개발자 앱을 만들지 못하게 하는 문제가 해결되었습니다. |
158318079 | 통합 포털 |
개발자 포털에서 콜백 URL을 추가하거나 수정할 수 없음 포털 사용자가 API 페이지에서 콜백 URL을 추가하거나 수정할 수 없던 문제가 해결되었습니다. |
157902256 | 통합 포털 |
게시하면 페이지 세부정보 페이지에서 페이지 이름 업데이트를 재정의할 수 있음 포털을 게시할 때 경합 상태로 인해 페이지 이름 업데이트가 재정의되던 문제가 수정되었습니다. |
138993728 | 통합 포털 |
개발자 프로그램 이메일 정렬 및 검색이 작동하지 않음 이제 일반 사용자 계정의 검색 및 정렬이 예상대로 작동합니다. |
알려진 문제
통합 포털의 알려진 문제 목록은 통합 포털의 알려진 문제를 참고하세요.