
아마추어 웹 소설 저작 및 열람을 위한 서비스 ‘글리프’의 로그인/회원가입 페이지. 재직 당시 출시 준비 및 이후 관리에 참여했습니다.
크로스 브라우징 문제
접근성 또는 시멘틱 마크업
- 불필요한 엘리먼트 래핑 제거 · PR#374
- 결제선에 가격 입력란 추가 -
inputmode="numeric"PR#451 - 구분선 항상 커서 이전에 생성되도록 고정하기 · PR#547
- 하드코딩 대신에
disabled어트리뷰트로 제어하기 · PR#603 - 포스트 편집 모드 스위치 버튼 스타일링을
disabled어트리뷰트 바탕으로 하기 · PR#661 - 저장 단축키 누르면 임시저장 실행하기 · PR#911
- 태그 입력을 submit 이벤트로 관리하기 · PR#1034
- 메뉴 컴포넌트 추가 - 코드리뷰 · PR#260
- 새 링크 입력 시 입력 박스에 자동 초점 맞추기 · PR#1101
- 검색 바에
input type="search"지정하기 · PR#1076 - 결제선 리뉴얼 · PR#1124
- 폼 전송 이후에 유효성 검사 결과 표시하기 · PR#1377
- button
type어트리뷰트 명시 누락되어서 추가함 · PR#1608 - 검색바 지우기 버튼에
type="reset"적용하기 · PR#1682
개발자 경험 향상
- TiptapRenderer layout shift 현상 수정 - 코드리뷰 · PR#380
- publish 경로 내 폴더 구조 정리 · PR#428
- 에디터 페이지 마운트 및 이력 복구 직후에 자동 저장을 실행하지 않게 구조 개선하기 · PR#602
- TabHeadItem query 의존성 주입으로 수정하기 · PR#1110
- Floating UI 보일러플레이트 코드를 커스텀 Svelte Action 으로 줄이기 · PR#1032
- Floating UI arrow 계산 보일러플레이트 코드 묶기 · PR#1033
- TabHeadItem 에서 Trailing Slash 를 색인하지 못하는 문제 고치기 · PR#1057
UI 주도적 제안 및 개선
색상 대비에 관한 피드백
재직헀던 회사에서 공개 허가를 받고 공유드리는 대화 이력입니다.

design 채널
Wednesday, March 20th nasu 3:48
오 그라데이션 필, 레드
필도 같이 변경하셨나 보네요.착각 임 대비가 커서 아웃라인을 더 구분하기
편해져보여요. (edited)
동료 디자이너 3:48 PM
오 나스님 의견 받고 수정중인데 수정완료되면 똑같이
문서 기입해놓을게요
nasu 3:51 PM
보더하고 색상 대비는 여길 확인하면 좋아요. 접근성 표준
기구에서 만든 도구입니다. https://webaim.org/resources/contrastchecker/
동료 디자이너 3:52 PM
나스님 혹시 600-800일때 차이 많이 보이나요? Cyan
color기준이요!
nasu 3:57 PM
맥북 화면으로 가까히 봤을 때야 보이는 정도에요… 이보다
디스플레이가 나쁘면 색 구분하기 어려울 겁니다. (edited) 스크린샷 2024-03-20 오후
3.55.53.png

design 채널
Wednesday, March 20th ~ nasu 3:50 PM
적어도 gray-primary-fill 정도는 되어야
될 것 같아요.
https://webaim.org/resources/contrastchecker/?fcolor=9B9B9B&bcolor=171717
스크린샷 2024-03-20 오후 3.58.20.png
동료 디자이너 4:01 PM
버튼 컬러 수정해두었어용 “#0C77920” 문서기입해놀게요
(🆗 이모지 달림)
nasu 4:01 PM
해당 기능을 가진 피그마 플러그인이 여러 개가 있네요.
https://www.figma.com/community/tag/a11y/plug
쓰는 걸 추천드립니다.
nasu 4:03 PM
넵 감사합니당 변경사항 작성해두었어용!! image.png
nasu 4:20 PM red-fIl 도 색상 대비가 좁은데 보정부탁드릴게요
This file was
deleted.
아 이게 현 버전입니다.
스크린샷 2024-03-20 오후 4.21.43.png