20.07.27 - Apigee Edge 통합 포털 출시 노트

현재 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 없음'이 이제 <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>=>입니다.

기존 홈페이지에 접근성 개선사항 추가

종료 포털이 있는 경우 아래 설명된 대로 탐색 가능한 카드의 새로운 접근성 향상 기능을 활용하려면 홈페이지를 수정해야 합니다.

  1. <mat-card> 컨테이너에서 href=""를 삭제합니다.
  2. <mat-card-header> 내의 카드 제목에 <H1> 대신 <H2>를 사용합니다.
  3. 카드 제목 내 <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 통합 포털

개발자 프로그램 이메일 정렬 및 검색이 작동하지 않음

이제 일반 사용자 계정의 검색 및 정렬이 예상대로 작동합니다.

알려진 문제

통합 포털의 알려진 문제 목록은 통합 포털의 알려진 문제를 참고하세요.