'interactions' 검색 결과

React와 Next.js의 로딩과 조작 반응 속도를 점검하는 지침입니다. 데이터 요청 대기, 초기 JavaScript 용량, 반복 렌더링 등을 우선순위에 따라 살펴봅니다.

• 페이지 로딩 지연 조사
• 브라우저에 전달하는 JavaScript 용량 점검
• 반복 렌더링과 조작 지연 줄이기

Perl 테스트 작성과 실행, 외부 의존성 대체, 예외 검증, 코드 커버리지 측정을 돕습니다. 테스트 우선 개발과 기존 테스트 이전에도 사용합니다.

• 테스트를 먼저 작성하는 Perl 개발
• Test::More 테스트 이전
• API와 데이터베이스 연동의 독립 검증

Ruby on Rails 앱의 구현과 검토에서 업무 처리, 검색, 폼의 책임을 정리합니다. 불필요한 데이터 조회를 줄이고 백그라운드 작업과 화면 구성 요소 설계도 돕습니다.

• 큰 controller의 업무 처리를 분리합니다
• 여러 모델을 갱신하는 폼을 설계합니다
• 중복 검색과 데이터 조회를 검토합니다

화면의 여백, 글자, 모서리 둥글기, 그림자와 움직임을 점검해 외관과 조작감을 다듬습니다. 버튼과 카드 등의 구체적인 개선안을 변경 전후로 제시합니다.

• 답답하거나 미완성처럼 보이는 화면 점검
• 버튼, 카드, 폼의 세부 마무리
• 호버 및 로딩 상태 개선

의료 앱 공개 전에 진료 판단 지원 로직, 환자 정보 유출, 데이터 무결성 등을 검증하는 스킬입니다. 중대한 테스트가 실패하면 배포를 중단하는 구성을 제시합니다.

• 전자 의무 기록 공개 전 검증
• 약물 상호작용과 투여량 검증 변경 확인
• 권한 변경 후 환자 정보 유출 확인

전자 의무기록에 임상 의사결정 지원을 구현합니다. 약물 상호작용, 용량 검증, 임상 점수 계산과 경고 심각도별 화면 동작 및 누락 검증 테스트를 다룹니다.

• 약물 상호작용과 알레르기 확인 구현
• 환자 정보에 따른 용량 검증
• NEWS2 등 임상 점수 구현

React와 Next.js 화면의 구현과 검토를 지원합니다. 컴포넌트 조합, 상태 관리, 데이터 가져오기, 표시 속도, 폼 검증과 키보드·포커스 동작 개선 패턴을 제공합니다.

• 재사용하기 쉬운 React 컴포넌트 정리
• 상태 관리와 데이터 가져오기 검토
• 긴 목록의 표시 속도 개선

Playwright로 브라우저 조작을 재현하는 테스트를 만들고 화면별 작업 정리와 자동 실행을 지원합니다. 간헐적 실패를 조사하고 이미지, 영상, 실행 기록을 저장합니다.

• 로그인과 검색 동작을 확인할 때
• 화면별 테스트 작업을 정리할 때
• 간헐적으로 실패하는 테스트를 조사할 때

시스템 구성, 업무 흐름, 처리 간 상호작용을 손그림 느낌의 도표로 만들고 Excalidraw에서 편집할 파일로 저장합니다. 공유 링크도 만들 수 있습니다.

• 시스템 구성을 도표로 설명
• 업무 절차를 순서도로 정리
• 시스템 간 상호작용 정리

화면 디자인을 비교할 수 있도록 조작 가능한 HTML 시안을 두세 개 만듭니다. 레이아웃과 정보량의 차이, 각 안의 장단점을 살펴 구현 전에 방향을 정합니다.

• 구현 전 화면 레이아웃 비교
• 정보량과 여백의 차이 확인
• 필터와 패널 조작 시안 제작

브랜드 자료, 스크린샷, 기존 코드를 바탕으로 HTML 랜딩 페이지와 슬라이드, 조작 가능한 프로토타입을 제작하고 구성과 시각적 대안을 비교하며 표시와 동작을 확인합니다.

• 브랜드 자료로 랜딩 페이지 제작
• 제품 조작 흐름의 프로토타입 제작
• HTML로 프레젠테이션 제작

앱이나 에이전트에 Firecrawl의 웹 검색, 페이지 내용 수집, 구조화된 정보 추출, 브라우저 조작 기능을 추가하도록 선택부터 설정, 구현, 동작 확인까지 안내합니다.

• 앱에 웹 검색 추가
• 알고 있는 URL에서 구조화된 데이터 추출
• 클릭과 양식 입력을 처리 흐름에 추가

Playwright로 로컬 웹 앱을 조작해 화면 기능과 동작을 확인합니다. 스크린샷과 브라우저 로그로 오류를 조사하고 테스트용 서버의 시작과 종료를 관리합니다.

• 로컬 앱의 버튼과 입력 양식 확인
• 화면과 로그를 활용한 오류 조사
• 프런트엔드와 백엔드 동시 실행 테스트

화면 표시, API, 데이터베이스의 지연을 측정해 원인을 좁히고 개선 전후 수치로 효과를 확인합니다. 효과 없는 변경의 되돌리기와 성능 저하를 막는 감시까지 안내합니다.

• 페이지 표시와 조작 지연의 원인을 조사합니다
• API 지연과 반복 쿼리를 줄입니다
• 변경 후 성능 저하를 확인합니다

실제 브라우저로 웹페이지와 앱을 조작하며 화면과 동작을 검증합니다. 스크린샷, 간단한 양식 입력, 오류 및 통신 기록으로 문제 재현과 결과 확인을 돕습니다.

• UI 변경 후 화면을 확인합니다
• JavaScript로 렌더링된 내용을 읽습니다
• 화면 문제와 오류를 재현합니다

Paperclip의 화면과 구성 요소를 기존 색상, 글자, 상태 표시, 조작 규칙에 맞춰 만들거나 수정하고, 재사용 구성 요소와 예시 페이지도 정리합니다.

• 기존 디자인 규칙에 맞는 페이지 추가
• 재사용할 수 있는 UI 구성 요소 제작
• 상태 색상과 우선순위 아이콘 통일

기존 화면이나 합의된 UI 안에 목적과 사용 빈도에 맞는 애니메이션을 구현합니다. 반복 조작으로 인한 중단과 동작 줄이기 설정도 처리합니다.

• 모달과 드로어의 열기·닫기 애니메이션
• 버튼과 토글 조작에 대한 피드백
• 반복 조작으로 중단되는 애니메이션 조정

시장 정보를 밀도 있게 배치한 거래 분석 대시보드를 단일 HTML로 만듭니다. 밝고 어두운 테마, 차트 상세 보기, 명령 팔레트를 갖춘 화면을 제공합니다.

• 금융 분석 터미널 화면 시제품 제작
• 시장 정보가 밀집된 화면 제시
• 차트 상세 보기와 조작 방식 시연

화면 애니메이션 코드를 속도, 자연스러움, 중단 대응, 렌더링 성능, 접근성 관점에서 검토합니다. 수정안과 이유를 제시하고 승인 여부를 판단합니다.

• 드롭다운과 툴팁의 움직임을 점검합니다
• 연속 조작에 대한 반응을 확인합니다
• 렌더링 성능을 해치는 애니메이션을 찾습니다

굵은 제목과 기하학적 카드를 활용해 스위스 스타일의 발표형 페이지를 단일 HTML 파일로 만듭니다. 슬라이드 이동, 테마와 강조색 전환, 주석 표시도 넣을 수 있습니다.

• 발표 형식의 소개 페이지 제작
• 스위스 스타일 HTML 슬라이드 제작
• 조작 가능한 제품 발표 페이지 제작

글자 배치, 색상, 여백, 움직임의 구체적인 규칙에 따라 React나 Next.js 화면을 구현합니다. 정보 밀도와 레이아웃을 조정하고 정형화된 외형을 피합니다.

• 글자 배치가 돋보이는 홍보 페이지를 만듭니다
• 대시보드 표시와 조작감을 조정합니다
• 정보 밀도와 움직임의 강도를 조정합니다

GSAP 플러그인으로 글자와 SVG 애니메이션, 드래그, 스크롤, 레이아웃 전환을 구현합니다. 용도에 맞는 기능 선택부터 등록, 설정, 정리까지 다룹니다.

• 제목을 한 글자나 한 줄씩 표시
• SVG 선 그리기와 도형 변형 추가
• 관성이 있는 드래그 구현

GSAP 기본 API로 웹 요소와 SVG의 이동, 회전, 페이드 효과를 구현합니다. 속도 변화와 시간차를 조절하고 화면 너비와 동작 줄이기 설정에 대응합니다.

• 웹 페이지에 이동과 페이드 효과를 넣을 때
• 여러 요소를 시간차로 움직일 때
• 화면 너비에 따라 동작을 바꿀 때

기존 웹 화면에 버튼 조작 피드백과 상태 변화를 전하는 절제된 애니메이션을 추가합니다. 글과 레이아웃을 유지하며 동작 줄이기 설정도 지원합니다.

• 버튼에 조작 피드백을 추가할 때
• 화면의 상태 변화를 전달할 때
• 주요 콘텐츠의 등장 효과를 다듬을 때