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

Apigee Edge 문서를 보고 있습니다.
Apigee X 문서로 이동하세요. info

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 가상 요소를 스타일링했습니다. 자세한 내용은 탐색 메뉴 및 페이지 헤더의 기본 색상 재정의를 참고하세요.
• 배경이 브라우저 창의 가장자리까지 확장되는 페이지 요소가 있습니다 (전체 화면 배경 이미지 제외): 응답성을 개선하기 위해 페이지 콘텐츠의 최대 너비가 제한되었으며, 이로 인해 맞춤설정 페이지 내의 이전 전체 너비 패널이 제한될 수 있습니다. 새 max-width 설정 사용에 관한 자세한 내용은 포털 페이지에서 전체 너비 패널 만들기를 참고하세요.
• CSS 선택자를 사용하여 특정 HTML 제목 수준을 타겟팅하여 텍스트 스타일을 수정했습니다. 특정 콘텐츠에 적용된 제목 수준이 변경되었습니다. 예: <H1> → <H2> 이번 출시의 세부 변경사항 목록을 검토하여 영향을 받는 콘텐츠를 정확히 파악합니다.
• 포털 테마 편집기에서 흰색 또는 매우 밝은 색상이 '보조 색상'으로 선택됨: 보조 색상은 흰색 배경에서 보기 어려운 탐색 요소에 사용됩니다. 접근성이 좋은 보조 색상을 선택한 다음 특정 상황에서 맞춤 scss로 재정의하는 것이 좋습니다.
• 텍스트 내 링크 스타일 지정: 이제 링크 스타일을 더 쉽게 이용할 수 있습니다. 아래의 변경사항을 참고하여 기존 스타일과 어떻게 상호작용하는지 알아보세요.
• 홈 뷰 카드 콘텐츠 영역의 2px border-bottom이 CSS 재정의로 스타일이 지정되거나 숨겨짐: 이 테두리가 <mat-card-content>에서 <mat-card-actions>의 border-top으로 이동되었습니다.

세부 변경사항 요약

다음 섹션에서는 이번 출시에서 구현된 자세한 변경사항을 카테고리별로 요약합니다.

포털 전체 변경사항

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

• 다음 변수는 더 이상 사용되지 않습니다.
  • $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 입력이 새 섹션으로 이동했습니다.
• 이제 저장 버튼이 mat-raised-button 스타일과 기본 색상 배경을 사용합니다.
• 이제 표가 .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로 변경됨
• <table class="team-apps">을 둘러싸는 <div class="team-apps-container">가 추가됨

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 관리를 참고하세요.

수정된 버그

다음은 이번 출시 버전에서 수정된 버그입니다. 이 목록은 주로 자신의 지원 티켓에서 제기한 문제가 수정되었는지 확인하는 사용자를 위한 것입니다. 모든 사용자에게 자세한 정보를 제공하기 위한 목적은 아닙니다.

알려진 문제

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