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

<ph type="x-smartling-placeholder"></ph> 현재 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> 이 버전의 세부 변경사항 목록을 검토하여 어떤 콘텐츠가 영향을 받는지 정확히 파악하세요.
• '보조 색상'으로 흰색 또는 매우 밝은 색상이 선택됨 포털 테마 편집기에서: 보조 색상은 흰색 배경에서는 잘 보이지 않는 탐색 요소에 사용됩니다. 액세스 가능한 보조 색상을 선택한 다음 특정 상황에서 필요한 경우 맞춤 Scss로 재정의하는 것이 좋습니다.
• 텍스트 내 링크의 스타일 지정: 이제 링크 스타일 지정에 더 쉽게 액세스할 수 있습니다. 기존 스타일과 상호작용하는 방식을 알아보려면 아래 변경사항을 참고하세요.
• Home 뷰 카드의 콘텐츠 영역 하단 2픽셀 테두리가 CSS 재정의로 스타일이 지정되거나 숨겨짐: 이 테두리가 <mat-card-actions>에서 <mat-card-content>에서 상단 테두리로 이동했습니다.

세부 변경사항 요약

다음 섹션에는 이번 출시에서 구현된 세부 변경사항이 카테고리별로 요약되어 있습니다.

포털 전체 변경사항

포털 전체에 적용되는 변경사항은 아래에 요약되어 있습니다.

• 다음 변수는 더 이상 사용되지 않습니다. <ph type="x-smartling-placeholder">
  </ph>
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• 기본 콘텐츠 영역의 최대 너비와 기본 콘텐츠 영역의 최소 수평 패딩을 제어하는 새로운 변수가 있습니다. <ph type="x-smartling-placeholder">
  </ph>
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

기본 탐색 메뉴 변경사항

기본 탐색 메뉴의 변경사항은 아래에 요약되어 있습니다.

• 이제 <img> 로고가 데스크톱 및 모바일 화면 크기에서 모두 <a>로 래핑됩니다.
• 이제 사용자 드롭다운 버튼이 <a>가 아닌 <button>입니다.

링크 스타일 변경사항

이제 텍스트 내 표준 링크 <a>에 기본적으로 밑줄이 표시되고 마우스를 가져가면 배경 색상 (테마 설정 '보조 색상' 기반)이 표시됩니다.

404 페이지 변경사항

404 페이지에 대한 변경사항은 아래에 요약되어 있습니다.

• '지금 로그인' 현재 <H1> 대신 <H2>
• 이제 설명 텍스트가 <H1> 대신 <H2>(으)로 변경되었습니다.

API 페이지

아래에는 API 페이지의 변경사항이 카테고리별로 요약되어 있습니다.

• API 검색/필터 입력 카드: <ph type="x-smartling-placeholder">
  </ph>
  • 이제 <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 목록 메시지: <ph type="x-smartling-placeholder">
  </ph>
  • 'API를 찾을 수 없음' 현재 <H1> 대신 <H2>
  • 설명이 <H2>가 아닌 <H3>로 변경되었습니다.
• API 카드 목록:

  '검색어와 일치하는 API가 없습니다.' 현재 <H1> 대신 <H2>

• API 카드: <ph type="x-smartling-placeholder">
  </ph>
  • >div class="api-doc-card-content-image-gradient"></div>님이 삭제되었습니다.
  • API 제목이 <div>가 포함된 이미지에서 이동하여 <div> 이미지 바로 뒤의 <div class="api-doc-card-content-title"></div>로 이동했습니다.
  • 이제 API 제목이 <H1>가 아닌 <H2>입니다.

앱 목록:

• 빈 상태: <ph type="x-smartling-placeholder">
  </ph>
  • "시작하기" 현재 <H1> 대신 <H2>
  • 빈 상태 안내가 이제 <H2>가 아닌 <H3>입니다.
• 목록: <ph type="x-smartling-placeholder">
  </ph>
  • "내 앱" 현재 <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를 대신 사용합니다.

팀 목록

팀 목록에 대한 변경사항은 아래에 요약되어 있습니다.

• 빈 상태: <ph type="x-smartling-placeholder">
  </ph>
  • "시작하기" 현재 <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로 변경되었습니다.
• <table class="team-apps"> 주변에 <div class="team-apps-container">이(가) 추가됨

SmartDocs

SmartDocs 인터페이스의 변경사항은 아래에 요약되어 있습니다.

• 측면 탐색 메뉴: <ph type="x-smartling-placeholder">
  </ph>
  • 측면 탐색이 Angular-Material 구성요소로 완전히 다시 작성됨
  • 측면 탐색 제목이 이제 <div>가 아닌 <H2>입니다.
  • 이제 탐색 항목에서 포털 테마 편집기 '보조 색상' 대신 포털의 기본 텍스트 색상을 사용합니다.
  • 이제 측면 탐색 메뉴의 선택, 포커스가 맞춰진 항목, 마우스 오버 항목에서 포털 테마 편집기의 어두운 버전과 밝은 변형을 사용합니다. 'secondary color' 각각 텍스트 및 배경을 사용합니다.
• 콘텐츠:
  • '경로 매개변수'와 같은 여러 부제목이 'Header Parameters'라는 이름을 현재 <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	통합 포털	개발자 프로그램의 이메일 정렬 및 검색이 작동하지 않음 일반 사용자 계정의 검색 및 정렬이 이제 예상대로 작동합니다.

알려진 문제

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