` 후에 `customCss` 값을 확인할 수 있어야 합니다. 스타일이 더 높은 우선순위를 가질 경우, 이를 재정의할 수 있어야 합니다. 예를 들어, 로그인 페이지에 **_Night City_**의 느낌을 주고 싶다면, 다음 CSS를 사용해 보십시오: <details> <summary> <b>CSS 및 미리보기 확장을 위해 클릭</b> </summary> ```css @font-face { font-family: 'Rock Salt'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/rocksalt/v18/MwQ0bhv11fWD6QsAVOZrt0M6p7NGrQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Share Tech'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/sharetech/v17/7cHtv4Uyi5K0OeZ7bohU8H0JmBUhfrE.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } #app * { font-family: 'Share Tech'; letter-spacing: 0.5px; } #app > div[class$='viewBox'] { background-image: url(https://silverhand.io/assets/v-in-nc.jpg); background-size: cover; } #app main[class$='main'] { background-image: url(https://silverhand.io/assets/gentle-universe.png); background-size: cover; opacity: 0.98; min-height: initial; padding: 24px; padding-bottom: 72px; border-radius: 12px; } #app main[class$='main'] img[class$='logo'] { content: url(https://silverhand.io/assets/cyberpunk-2077.png); margin: -20px 0 -12px; height: 160px; } #app main[class$='main'] div[class$='headline'] { visibility: hidden; height: 60px; } #app main[class$='main'] div[class$='headline']:before { content: 'Welcome to Night City'; visibility: visible; display: block; font-family: 'Rock Salt'; font-style: italic; line-height: 60px; font-size: 20px; color: rgba(245, 250, 255, 0.6); padding: 0 20px; } #app form div[class$='inputField'] > div { outline: none; border: none; border-radius: 4px; } #app form div[class$='inputField'] > div > input, #app form div[class$='inputField'] div[class$='countryCodeSelector'] { background: initial; background-color: #453f67; font-family: 'Share Tech'; letter-spacing: 0.5px; font-size: 16px; font-weight: 600; } #app button { font-weight: 600; font-size: 16px; border-radius: 4px; } #app button[type='submit'] { background: linear-gradient(270.84deg, #2fd6fb -24.55%, #6369fc 44.33%, #a741eb 119.2%), #5d34f2; } ``` ![custom-css-preview](https://user-images.githubusercontent.com/14722250/221394786-4ae77638-8f35-4791-afae-8ab6a314dbf8.jpg) _"우리는 불타야 할 도시가 있습니다!"_ </details> <Note> Logto는 CSS 모듈을 사용하기 때문에, DOM 요소의 `class` 속성에 해시 값을 볼 수 있습니다 (예: `vUugRG_container`가 있는 `<div>`). 이를 재정의하려면 `$=` CSS 선택자를 사용하여 지정된 값으로 끝나는 요소를 일치시킬 수 있습니다. 이 경우, `div[class$=container]`이어야 합니다. </Note> ### 🔗 더 나은 설정 인터페이스로 오픈 표준 커넥터 Logto는 외부 ID 공급자를 통합하기 위해 소셜 커넥터를 생성할 수 있는 표준 프로토콜 (SAML, OIDC, OAuth 2.0)을 지원합니다. 각 프로토콜은 여러 소셜 커넥터를 생성할 수 있으며, 더 많은 접근 요구 사항을 제어할 수 있습니다. 게다가, 우리는 SAML 커넥터를 위한 설정 인터페이스를 최적화했습니다. 시도해보고 여러분의 의견을 들려주세요! ### 📄 신규 언어 러시아어 번역 추가. (크레딧 [@evist0](https://github.com/evist0)) ## 🎉 신규 기여자 - [@Alanimdeo](https://github.com/Alanimdeo) 님이 [#3064](https://github.com/logto-io/logto/pull/3064)에서 첫 기여를 했습니다 - [@gadkins](https://github.com/gadkins) 님이 [#3032](https://github.com/logto-io/logto/pull/3032)에서 첫 기여를 했습니다 - [@evist0](https://github.com/evist0) 님이 [#3158](https://github.com/logto-io/logto/pull/3158)에서 첫 기여를 했습니다 - [@muratgozel](https://github.com/muratgozel) 님이 [#3203](https://github.com/logto-io/logto/pull/3203)에서 첫 기여를 했습니다 감사합니다! </article></body></html>

Logto Cloud가 여전히 개발 중인 동안, 우리의 기본인 Logto OSS에 몇 가지 새로운 기능을 소개하고자 합니다. 이 버전은 일반 제공 이전의 마지막 버전이 될 것입니다. 주요 업데이트는 다음을 포함합니다: - 인프라가 리팩토링되고 보안이 강화되었습니다. - 로그인 경험에 스마트 입력 및 사용자 정의 CSS 추가 - 오픈 표준 커넥터 (SAML, OIDC, OAuth 2.0) - 신규 언어 지원 내부 내용을 살펴보겠습니다! ## 💥 주요 변경 사항 💥 ### 일반 사용자와 관리자 분리 Logto는 일반 사용자와 관리자 그리고 웹 콘솔에 단일 포트를 사용하고 있었습니다. 높은 수준의 보안을 지속적으로 유지하더라도, 이러한 구성 요소를 두 개의 별도 부분으로 분리하여 데이터를 격리하고 유연한 인프라를 제공하는 것이 좋습니다. ![image1](https://user-images.githubusercontent.com/14722250/221365507-6f20a804-1059-4933-9b88-df1244ab900b.png) 이 버전부터 Logto는 기본적으로 두 포트를 듣습니다. 하나는 일반 사용자 (`3001`)를 위해, 그리고 하나는 관리자 (`3002`)를 위해서 입니다.

‼️ 세부 정보 확장을 위해 클릭

- 일반 사용자의 경우 변경 사항이 없습니다. 채택이 필요하지 않습니다. - 관리자 사용자: - 기본 관리자 콘솔 URL이 `http://localhost:3002/console`로 변경되었습니다. - 관리자 포트를 변경하려면 환경 변수 `ADMIN_PORT`를 설정하십시오. 예를 들어, `ADMIN_PORT=3456`. - 관리자를 위한 사용자 정의 엔드포인트를 지정하려면 환경 변수 `ADMIN_ENDPOINT`를 설정하십시오. 예를 들어, `ADMIN_ENDPOINT=https://admin.your-domain.com`. - 관리자 엔드포인트를 완전히 비활성화하려면 `ADMIN_DISABLE_LOCALHOST=1`을 설정하고 `ADMIN_ENDPOINT`를 설정하지 않으면 됩니다. - 관리자 콘솔 및 관리자 사용자 데이터는 `localhost` 및 환경의 `ENDPOINT`를 포함한 일반 사용자 엔드포인트를 통해 접근할 수 없습니다. - 관리자 콘솔은 더 이상 관리자 사용자의 감사 로그를 표시하지 않습니다. 하지만 이러한 로그는 여전히 데이터베이스에 존재하며, Logto는 여전히 관리자 사용자 로그를 삽입합니다. 단지 그것들을 검사할 편리한 인터페이스가 없습니다. - 데이터 격리로 인해, 대시보드의 숫자가 약간 감소할 수 있습니다 (관리자는 제외됨). - Logto Management API의 리소스 지시자가 `https://api.logto.io`에서 `https://default.logto.app/api`로 변경되었습니다.

이전 버전에서 업그레이드하는 경우, [데이터베이스 변경 명령](https://docs.logto.io/docs/tutorials/using-cli/database-alteration)을 평소처럼 실행하고 나머지는 우리가 담당합니다. 내부적으로 우리는 강력한 Postgres 기능인 행 수준 보안을 사용하여 관리자와 사용자 데이터를 격리합니다. ### CORS 정책 - `ADMIN_ENDPOINT`가 지정되지 않은 경우, `localhost:[admin-port]`가 Logto에서 교차 출처 리소스 공유 (CORS)를 수행할 수 있도록 허용됩니다. - `ADMIN_ENDPOINT`가 지정된 경우, `ADMIN_ENDPOINT`의 출처에서 온 요청만 허용됩니다. ## 🔐 보안 업데이트 이전 버전에서는, 등록하거나 비밀번호를 변경할 때 모든 새로운 비밀번호가 암호화 및 데이터베이스 삽입 전에 감사 로그에 평문으로 저장되었습니다. 이 버전에서는 비밀번호 필드를 완전히 마스킹한 후 감사 로그에 삽입하도록 프로세스를 업데이트했습니다. 보안 및 규정 준수를 강화하기 위해, 모든 비밀번호를 감사 로그에서 제거하거나 비밀번호가 포함된 모든 로그를 삭제할 것을 강력히 권장합니다. 이 문제나 데이터 삭제와 관련하여 질문이 있는 경우 이메일이나 Discord를 통해 언제든지 문의하십시오. ## 🧑‍🚀 기능 업데이트 ### 💡 로그인 경험을 위한 스마트 입력 사용자 이름, 전화번호, 이메일 등의 전통적인 입력 필드를 하나의 지능형 입력 상자로 통합했습니다:

이 고급 입력 상자는 `@` 기호나 연속된 숫자와 같은 입력 문자의 유형을 자동으로 식별하고 관련 오류 피드백을 제공합니다. 로그인 프로세스를 간소화함으로써 사용자는 원하는 로그인 방법을 변경시키기 위해 어떤 버튼을 클릭해야 할지 고민하는데 시간을 낭비하지 않게 됩니다. 이는 오류의 위험을 줄이고 원활한 로그인 경험을 보장합니다. ### 🎨 로그인 경험에서 사용자 정의 CSS 우리는 사용자 로그인 경험 개선에 많은 노력을 기울였으며 UI를 위한 브랜드 색상 옵션을 제공했습니다. 그러나 UI 요구사항을 미세 조정하는 것은 예측할 수 없는 경우가 많습니다. Logto가 여전히 맞춤화에 대한 최고의 옵션을 탐색하고 있는 동안, 개발을 차단하지 않기 위해 프로그램 방식의 방법을 제공하고자 합니다. 이제 Management API `PATCH /api/sign-in-exp`를 사용하여 본문 `{ "customCss": "arbitrary string" }`로 로그인 경험에 대해 맞춤화된 CSS를 설정할 수 있습니다. 페이지의 `` 후에 `customCss` 값을 확인할 수 있어야 합니다. 스타일이 더 높은 우선순위를 가질 경우, 이를 재정의할 수 있어야 합니다. 예를 들어, 로그인 페이지에 **_Night City_**의 느낌을 주고 싶다면, 다음 CSS를 사용해 보십시오: <details> <summary> <b>CSS 및 미리보기 확장을 위해 클릭</b> </summary> ```css @font-face { font-family: 'Rock Salt'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/rocksalt/v18/MwQ0bhv11fWD6QsAVOZrt0M6p7NGrQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Share Tech'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/sharetech/v17/7cHtv4Uyi5K0OeZ7bohU8H0JmBUhfrE.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } #app * { font-family: 'Share Tech'; letter-spacing: 0.5px; } #app > div[class$='viewBox'] { background-image: url(https://silverhand.io/assets/v-in-nc.jpg); background-size: cover; } #app main[class$='main'] { background-image: url(https://silverhand.io/assets/gentle-universe.png); background-size: cover; opacity: 0.98; min-height: initial; padding: 24px; padding-bottom: 72px; border-radius: 12px; } #app main[class$='main'] img[class$='logo'] { content: url(https://silverhand.io/assets/cyberpunk-2077.png); margin: -20px 0 -12px; height: 160px; } #app main[class$='main'] div[class$='headline'] { visibility: hidden; height: 60px; } #app main[class$='main'] div[class$='headline']:before { content: 'Welcome to Night City'; visibility: visible; display: block; font-family: 'Rock Salt'; font-style: italic; line-height: 60px; font-size: 20px; color: rgba(245, 250, 255, 0.6); padding: 0 20px; } #app form div[class$='inputField'] > div { outline: none; border: none; border-radius: 4px; } #app form div[class$='inputField'] > div > input, #app form div[class$='inputField'] div[class$='countryCodeSelector'] { background: initial; background-color: #453f67; font-family: 'Share Tech'; letter-spacing: 0.5px; font-size: 16px; font-weight: 600; } #app button { font-weight: 600; font-size: 16px; border-radius: 4px; } #app button[type='submit'] { background: linear-gradient(270.84deg, #2fd6fb -24.55%, #6369fc 44.33%, #a741eb 119.2%), #5d34f2; } ``` ![custom-css-preview](https://user-images.githubusercontent.com/14722250/221394786-4ae77638-8f35-4791-afae-8ab6a314dbf8.jpg) _"우리는 불타야 할 도시가 있습니다!"_ </details> <Note> Logto는 CSS 모듈을 사용하기 때문에, DOM 요소의 `class` 속성에 해시 값을 볼 수 있습니다 (예: `vUugRG_container`가 있는 `<div>`). 이를 재정의하려면 `$=` CSS 선택자를 사용하여 지정된 값으로 끝나는 요소를 일치시킬 수 있습니다. 이 경우, `div[class$=container]`이어야 합니다. </Note> ### 🔗 더 나은 설정 인터페이스로 오픈 표준 커넥터 Logto는 외부 ID 공급자를 통합하기 위해 소셜 커넥터를 생성할 수 있는 표준 프로토콜 (SAML, OIDC, OAuth 2.0)을 지원합니다. 각 프로토콜은 여러 소셜 커넥터를 생성할 수 있으며, 더 많은 접근 요구 사항을 제어할 수 있습니다. 게다가, 우리는 SAML 커넥터를 위한 설정 인터페이스를 최적화했습니다. 시도해보고 여러분의 의견을 들려주세요! ### 📄 신규 언어 러시아어 번역 추가. (크레딧 [@evist0](https://github.com/evist0)) ## 🎉 신규 기여자 - [@Alanimdeo](https://github.com/Alanimdeo) 님이 [#3064](https://github.com/logto-io/logto/pull/3064)에서 첫 기여를 했습니다 - [@gadkins](https://github.com/gadkins) 님이 [#3032](https://github.com/logto-io/logto/pull/3032)에서 첫 기여를 했습니다 - [@evist0](https://github.com/evist0) 님이 [#3158](https://github.com/logto-io/logto/pull/3158)에서 첫 기여를 했습니다 - [@muratgozel](https://github.com/muratgozel) 님이 [#3203](https://github.com/logto-io/logto/pull/3203)에서 첫 기여를 했습니다 감사합니다! </article></body></html>